封装axios

为什么要对axios进行封装

• 可以更方便的管理和修改axios请求域名，假设是一个庞大的项目，只是修改域名就会花费很多的时间和精力，如果对axios进行封装，便能省去了喝多的步骤

第一步：

首先在开始之前，先安装axios插件

• 在src目录下创建utils文件夹，里面创建一个http.js文件，文件内容如下：

// 首先引入axios插件
import axios from "axios";
// 引入element-plus插件
import { ElMessage } from 'element-plus'
// 网址是后台管理系统的接口
const http = axios.create({
    baseURL: "https://www.liulongbin.top:8888/api/private/v1",
    timeout: 10000
})

// 请求拦截
http.interceptors.request.use(config => {
    let token = localStorage.getItem('token') || ''
    config.headers.Authorization = token
    return config
}, err => {
    throw new Error(err)
})


// 响应拦截
http.interceptors.response.use(res => {
    // status 是返回的状态码   msg 是返回状态码的信息
    let { status, msg } = res.data.meta
    switch (status) {
        case 200:
            ElMessage({
                message: msg,
                type: 'success',
            })
            break;
        case 201:
            ElMessage({
                message: '创建成功',
                type: 'success',
            })
            break;
        case 204:
            ElMessage({
                message: '删除成功',
                type: 'success',
            })
            break;
        case 400:
            ElMessage({
                message: '请求的地址不存在或者包含不支持的参数',
                type: 'success',
            })
            break;
        case 401:
            ElMessage({
                message: '未授权',
                type: 'success',
            })
            break;
        case 403:
            ElMessage({
                message: '被禁止访问',
                type: 'success',
            })
            break;
        case 404:
            ElMessage({
                message: '请求的资源不存在',
                type: 'success',
            })
            break;
        case 422:
            ElMessage({
                message: '发生一个验证错误',
                type: 'success',
            })
            break;
        case 500:
            ElMessage({
                message: '内部错误',
                type: 'success',
            })
            break;
    }
    return res.data.data
}, err => {
    throw new Error(err)
})
// 导出http
export default http;

• 这一顿操作之后，请求配置文件就算是写好了

第二步：

• 接下来在src目录下创建request.js文件，在里面编写请求数据接口的方法，文件内容如下：

// 导入请求配置文件
import http from "./http";

function request({ method = 'get', url, data = {}, params = {} }) {
    return http({
        method,
        url,
        data,
        params
    })
}
//导出request
export default request;

• 进行了这样的封装之后，如果后期其他的项目需要更换或者是修改域名，可以直接在request.js文件里修改 const baseURL = process.env.NODE_ENV === “production” ? “https://www.xxxx.com” : “”;即全局修改域名

axios封装的理论

对axios封装(url统一管理、axios请求拦截、响应拦截、函数封装)

首先要安装axios，一般我会在项目的src目录中，新建一个utils文件夹,作为我们的网络请求模块，然后在里面新建一个http.js和一个api.js文件和一个reques.js。http.js文件用来封装我们的axios，在http.js里面添加请求拦截器和响应拦截器api.js用来统一管理我们的接口url, reques.js用来调用封装我们需要使用到的方法

在request.js中添加请求拦截和响应拦截。在请求拦截中，会给请求头添加token字段，还有loading动画的开启。在响应拦截中，可以做一些loading动画的关闭，还有可以根据后端返回的状态码，做一些检验token是否有效或者过期的操作。接着就是做一些axios进行的api接口的封装，这里我用到了async，await封装请求接口函数，这样可以将异步操作同步化操作，代码更加友好，避免回调地域的出现。

一般在使用axios时，会用到拦截器的功能，一般分为两种：请求拦截器、响应拦截器。

请求拦截器

在请求发送前进行必要操作处理，例如添加统一cookie、请求体加验证、设置请求头等，相当于是对每个接口里相同操作的一个封装；

响应拦截器

同理，响应拦截器也是如此功能，只是在请求得到响应之后，对响应体的一些处理，通常是数据统一处理等，也常来判断登录失效等。