axios的三层封装进阶版

axios 的三层封装进阶版

1. 用处

1. 在做项目的时候频繁的去调接口其实非常麻烦，这种重复的工作就需要axios的三层封装来解决。

2. 简单版的三层封装实现

1. 第一层

1. 第一步当然是安装引入axios了

yarn add axios

• 创建一个js文件，用来封装第一层。

import axios from "axios";

2. 设置基础的服务器地址

axios.defaults.baseURL = ‘服务器地址’

3. 然后一定要暴露出去，因为第二层会引入。

//默认暴露
export default axios

2. 第二层

1. 创建一个js文件，还是先引入，引入第一层的axios。注意这个引入的文件是第一层创建的js文件。

//根据自己路径引入
import axios from "@/utils/axios.js";

2. 写好api接口，暴露出去。get方式参数要用params，post用data。

• get 方式

//get方式
export const getGoodsList = (params) => {
    return axios({
        method: 'get',
        url: '/goods/catelist',
        params,
    })
}

• post方式

//post方式
export const EditGoodsClass = (data) => {
    return axios({
        method: 'post',
        url: '/goods/editcate',
        data,
    })
}

3. 第三层

1. 第三层自然是引入使用了，在vue组件中引入。注意引入的是第二层的js文件。

import { getGoodsList, EditGoodsClass,} from "@/api/user.js";

2. 去使用，因为请求是异步的，所以可以async、await修饰它。

async getList() {
      let res = await getUserList(this.form);//使用
      this.tableData = res.data.data;
      this.total = res.data.total;
},

3. 进阶版的axios三层封装。

1. 响应拦截

1. 在发请求后，收到数据一般要根据不同的状态进行不同的处理，而不是直接使用。

• 去官网可以直接找到axios的拦截器。
• 这里的状态码要根据服务器的数据来。

axios.interceptors.response.use(function (res) {
    if ((typeof res.data.code) === 'number') {
        // 3.1 根据反馈结果显示提示信息。
        if (res.data.code === 0) {
            //成功时，用elenetUI显示成功的提示信息
            Message.success(res.data.msg)
        } else if (res.data.code === 200) {
            Message.success(res.data.msg)
        } else {
            //失败显示失败的
            Message.error(res.data.msg)
        }
    }
    return res;
}, function (error) {
    // 这里可以处理违规访问，跳转登录页。
    return Promise.reject(error);
})

2. 请求拦截

axios.interceptors.request.use(function (config) {
    // 在发送请求之前可以携带token
    if (local.get('token')) {
        config.headers.Authorization = 'Bearer ' + local.get('token')
    }
    return config;
}, function (error) {
    // 对请求错误做些什么
    return Promise.reject(error);
})

这样就基本完成了进阶版