vue基础整理之axios请求二次封装

npm install axios --save 在项目中引入 axios第三方插件
在项目中建立一个App.js 当然 名字可以随意取
导入import axios from ‘axios’;

//在vue原型链中封装post请求方法
function createService () {
     
    // 创建一个 axios 实例
    const service = axios.create()
    // 请求拦截
    service.interceptors.request.use(
        //发送成功
        config => {
     
            //可在此配置请求头信息
            config.headers.Authorization = "项目token";
            return config
        },
        //发送失败
        error => {
     
            return error
        }
    )
    //响应拦截
    service.interceptors.response.use(
        //请求成功
        response => {
     
             //抛出返回值
             return response;
        },
        //请求失败
        (error, response) => {
     
            //返回错误信息
            return error;
        }
    )
    //抛出对象
    return service
}

在建立发送请求的方法

function createRequestFunction (service) {
     
       return function (config) {
     
        const configDefault = {
     
        headers: {
     
	          Authorization:"",
	          'Content-Type':'application/json'
        },
        timeout: 100000,
        baseURL: process.env.VUE_APP_API,
        data: {
     }
      }
      return service(Object.assign(configDefault, config))
    }
  }

最后我们将方法挂在Eventbus里 方便全局调用

export const service = createService()
Vue.prototype.request = createRequestFunction(service);