vue中 axios的封装

Vue项目中封装axios： 创建src/utils/axios.js

/**
 * 封装的axios异步请求模块
 */
import Vue from "vue"
import axios from "axios"

const instance = axios.create({
    baseURL: 'http://localhost:3000/brand/api/',
    timeout: 1000,
    headers: {'X-Custom-Header': 'foobar', "token": "mytoken"}
});

instance.interceptors.request.use( request => {
    // 请求拦截器
    return request
})

// 响应拦截器
instance.interceptors.response.use( response => {
    // 对服务器返回的数据进行处理，返回服务器返回的真实数据
    return response.data
})


Vue.prototype.$http = instance

export default instance

封装的axios不会立刻执行，需要在main.js中引入一下才能保障axios已经被加载

import Vue from 'vue'
import App from './App.vue'
import "./utils/axios"			// 引入axios，主要的目的是让js模块中的代码执行

Vue.config.productionTip = false

new Vue({
  render: h => h(App),
}).$mount('#app')