vue项目中自定义封装axios

安装axios

cd vue项目目录
npm i axios

建文件夹

在vue项目目录的src目录下新建一个文件夹，建议其名称是request或api。

写封装js

在上述的新建文件夹中(本文是request)新建index.js，在index.js中写代码

// 导入axios包
import axios from 'axios'
// 实例化一个axios对象
const instance = axios.create({
  baseURL: 'http://localhost:3000',
  timeout: 5000,
})
// 配置拦截器,传入的第一个参数是响应成功后的回调，第二个参数是响应失败后的回调
// 拦截器分响应拦截器和请求拦截器，这里是响应拦截器
instance.interceptors.response.use(
  (res) => {
    return res.data
  },
  (err) => {
    return Promise.reject(err)
  }
)

// 导出封装对象
export default instance

通过自写插件注册封装后的axios

1. 在src目录下新建plugins文件夹，在这个文件夹下，新建一个js文件，名称随意；
2. 在js文件中进行注册：

import Vue from 'vue'
import axios from '../request'

// 把封装的axios的功能都放到vue的$http属性下
const myAxios = {
  install(Vue) {
    Vue.prototype.$http = axios
  },
}
Vue.use(myAxios)

3. 把写好的插件文件，导入到main.js