vue中封装一个axios拦截器，统一管理所有接口请求

1.下载安装axios

npm install axios -S

2.新建文件夹api，新建http.js文件

3.在http.js文件中引入需要用到的库 

import axios from 'axios'
import Vue from 'vue'

4.创建拦截，配置接口路径，请求头

// 配置接口路径
const http = axios.create({
    //baseURL: process.env.baseUrl,
    baseURL: 'http://192.168.0.111/',
    headers: { 'Content-Type': 'application/json' }
})

5.对响应数据做统一处理

http.interceptors.response.use(function (response) {
    // 在接收响应成功后
    if (response.data.code === 200) {
        // 返回收到的数据
        return response
    } else {
        // 对返回错误码做点什么
        // 比如返回首页
        return response;
    }
}, function (error) {
    // 对响应错误做点什么
    return Promise.reject(error);
});

6.配置请求函数

// 公共请求配置
export default async (url, data, type = 'GET') => {
    if (type === 'GET') {
        const res = http.get(url, { params: data })
        return res
    } else if (type === 'POST') {
        const res = http.post(url, data)
        return res
    }
}

7.新建api.js文件，引入http文件

import ajaxHttp from './http/http'

// 商品管理相关
export const goods = {
  getBusinessList: (data) => ajaxHttp('/business/getBusinessList', data, 'POST'), // 新增商品
  delBusinessItem: (data) => ajaxHttp('/business/delBusinessItem', data, 'POST'), // 删除商品
}

8.在vue文件中引入goods就可以使用了

    import {goods} from "@/http/api"
    
    goods.getBusinessList(params).then(res => {
      // console.log(res)
    });