美文网首页vue.js
vue封装axios的api

vue封装axios的api

作者: 紫痕蓝羽 | 来源:发表于2019-04-09 16:43 被阅读8次

api/request.js

import axios from 'axios'

const instance = axios.create({

    baseURL: "www.bai.com/",

    timeout: 1000,

})

// 添加请求拦截器

instance.interceptors.request.use(function (config) {

    // 在发送请求之前做些什么

  // console.log('我是拦截器',config)

    return config;

}, function (error) {

    // 对请求错误做些什么

    return Promise.reject(error);

});

// 添加响应拦截器

instance.interceptors.response.use(function (response) {

    // 对响应数据做点什么

  //  console.log('我是响应器',response)

    return response;

}, function (error) {

    // 对响应错误做点什么

    return Promise.reject(error);

});

/**

* 封装get方法

* @param url

* @param data

* @returns {Promise}

*/

export function fetch(url,params={}){

    return new Promise((resolve,reject) => {

      instance.get(url,{

        params:params

      })

      .then(response => {

        resolve(response.data);

      })

      .catch(err => {

        reject(err)

      })

    })

  }

  /**

* 封装post请求

* @param url

* @param data

* @returns {Promise}

*/

  export function post(url,data={}){

    return new Promise((resolve,reject)=>{

        instance.post(url,data)

        .then(response=>{

          // console.log("我是封装的",response.data);

            resolve(response.data)

        },err=>{

            reject(err)

        })

    })

  }

export default instance

main.js

import Vue from 'vue'

import App from './App'

import router from './router'

import store from './store'

Vue.config.productionTip = false

import {post,fetch,patch,put} from './api/request'

//定义全局变量

Vue.prototype.$post=post;

Vue.prototype.$fetch=fetch;

/* eslint-disable no-new */

new Vue({

  el: '#app',

  router,

  store,

  components: { App },

  template: '<App/>'

})

相关文章

  • 上传

    axios封装 上传api.js api.js vue文件

  • vue项目后台接口管理

    前言 上篇文章axios二次封装及API接口统一管理讲到了vue项目中的axios请求api统一的封装,但是api...

  • vue中axios封装和api接口管理

    vue中Axios的封装和API接口的管理 我们所要的说的axios的封装和api接口的统一管理,其实主要目的就是...

  • 2020-04-07vue中Axios的封装和API接口的管理

    vue中Axios的封装和API接口的管理 我们所要的说的axios的封装和api接口的统一管理,其实主要目的就是...

  • vue中axios封装和api接口管理

    vue中Axios的封装和API接口的管理 我们所要的说的axios的封装和api接口的统一管理,其实主要目的就是...

  • axios封装

    index.js------axios封装 api.js------接口文件 单页面引入---login.vue ...

  • 2022-04-15 Vue

    Vue 中 Axios 的封装和 API 接口的管理 [https://www.cnblogs.com/hhj-b...

  • Vue axios api封装

    标签:axios iplas axios 基于promise用于浏览器和node.js的http客户端 特点: 支...

  • 【VUE】axios api封装

    第一步:先安装axios 第二步:src文件夹下新建文件夹http(想叫什么名字自己开心就好),新建2个js(叫啥...

  • vue封装axios的api

    api/request.js import axios from 'axios' const instance =...

网友评论

    本文标题:vue封装axios的api

    本文链接:https://www.haomeiwen.com/subject/pqriiqtx.html