Vue 封装API axios二次封装步骤

api的封装主要的目的就是：在帮助我们简化代码和后期的更新维护，请求拦截器、响应拦截器、响应拦截器可以再发送请求之前可以处理一些业务、响应拦截器，当服务器返回以后，可以处理一些事情。

使用步骤：

1.安装axios npm i --save axios

1.在src文件夹下新建api文件夹，api下新建request.js

3.api下新建index.js

4.vue.config.js中添加跨域

request.js内容

// 对于axios进行二次封装
import axios from "axios"

// 1.利用axios对象的方法create，去创建一个axios实例
// 2.request就是axios，只不过稍微配置一下
const requests = axios.create({
    //配置对象
    //基础路径，发请求的时候，路径当中会出现api
    baseURL: "/api",
    // 代表请求超时的时间5S
    timeout: 5000,
})
//请求拦截器：在发请求之前，请求拦截器可以检测到，可以在请求发出去之前做一些事情

request.interceptors.request.use((config) => {
    //config:配置对象，对象里面有一个属性很重要，header请求头
    return config;
})

//响应拦截器
requests.interceptors.response.use((res) => {
    //成功的回调函数：服务器相应数据回来以后，响应拦截器可以检测到，可以做一些事情
    return res.data;
}, (error) => {
    //响应失败的回调函数
    return Promise.reject(new Error('faile'));
});

//对外暴露
export default requests;

vue.config.js内容

module.exports = {
    //关闭eslint
    lintOnSave: false,
    //代理跨域
    devServer: {
        proxy: {
            '/api': {
                target: 'http://39.98.123.211',
            }
        }
    }
}

index.js内容

//当前这个模块：API进行统一管理
import requests from './request';

// 三级联动接口 
export const reqCategoryList = prarms => {
    return request({
        url: "/device/list?productId=",
        method: "get",
        data: prarms
    });
};

export const distributionAdd = prarms => {
    return request({
        url: "/project/main/add",
        method: "post",
        data: prarms
    });
};

export const distributionBus = prarms => {
    return request({
        url: "/device/list?productId=" + 1,
        method: "get",
        data: prarms
    });
};

// 使用
// addCommercialInfo(this.form)
//     .then((res) => {
//         if (res.code == 200) {
//             this.getList();
//         } else {
//             alert(res.mag)
//         }
//     })
//     .finally(() => {
//         this.buttonLoading = false;
//     });