Axios的实用简易封装

前言

axios 是目前最优秀的 HTTP 请求库之一，虽然 axios 已经封装的非常好了，我们可以直接拿过来用。但是在实际的项目中，我们可能还需要对 axios 在封装一下，以便我们更好的管理项目和各个接口，本篇文章是一个简易的Axios封装，方便朋友们上手。

1.封装的目的

此次进行简单的封装，所以暂时没有考虑取消重复请求、重复发送请求、请求缓存等情况！这里主要实现以下目的：

1. 实现请求拦截
2. 实现响应拦截
3. 常见错误信息处理
4. 请求头设置
5. api 集中式管理

2.初始化 axios实例

虽然 axios 可以调用 get、post 等方法发起请求，但是我们为了更好的全局控制所有请求的相关配置，所以我们使用 axios.create()创建实例的方法来进行相关配置，这也是封装 axios 的精髓所在。

示例代码：

const http = axios.create({
    // 设置请求接口数据的基准地址，后面请求的时候只需要加请求路径
    baseURL: 'http://127.0.0.1:8888/api/private/v1/',
    // 设置超时时间
    timeout: 5000,
    withCredentials: false
})

 通过 create 方法我们得到了一个 axios 的实例，该实例上有很多方法，比如拦截器等等。我们创建实例的时候可以配置一些基础设置，比如基础请求地址，请求超时等等。

3.设置请求拦截

我们在发送请求的时候可能需要携带一些信息在请求头上，比如 token 等，所以说我们就需要将请求拦截下来，处理一些我们的业务逻辑。

实例代码：

http.interceptors.request.use(
  (config) => {
    // 如果开启 token 认证
    if (serverConfig.useTokenAuthorization) {
      config.headers["Authorization"] = localStorage.getItem("token"); // 请求头携带 token
    }
    // 设置请求头
    if(!config.headers["content-type"]) { // 如果没有设置请求头
      if(config.method === 'post') {
        config.headers["content-type"] = "application/x-www-form-urlencoded"; // post 请求
        config.data = qs.stringify(config.data); // 序列化,比如表单数据
      } else {
        config.headers["content-type"] = "application/json"; // 默认类型
      }
    }
    //请求时的进度条
    nprogress.start();
    return config;
  },
  (error) => {
    Promise.reject(error);
  }
);

我们通过调用 axios的实例方法进行请求拦截，并且下载了nprogress进度条插件，请求的时候使用start()方法，让进度条开始动。

4.设置响应拦截器

axios 请求的返回结果里面包含了很多东西，我们的业务层面通常只需要后端返回的数据即可，所以我们需要设置相应拦截，在响应结果返回给业务层之前做一些操作

实例代码：

// 设置响应拦截器
http.interceptors.response.use(
    res => {
        //拿到后端返回的data值
        let data = res.data;
        //启用nprogress结束动画
        nprogress.done()
        return data
    }, error => {
        return Promise.reject(error)
    }
)

上述代码返回了一个请求完成之后拿到data的值，以及使用了进度条结束功能done()方法

5.封装请求方法

import http from '../http';

export const getUserInfo = (params) => {
  return serviceAxios({
    url: "/api/user/users",
    method: "post",
    params,
  });
};

export const login = (data) => {
  return serviceAxios({
    url: "/api/user/login",
    method: "post",
    data,
  });
};

重新创建一个文件夹，里面放请求的方法，并导出，get请求需要传params，post请求需要传data

6.调用方法

import { login } from "@/http/api/user"
async loginAsync() {
  let params = {
    email: "123",
    password: "12321"
  }
  let data = await login(params);
  console.log(data);
}

7.总结

我们这里只做了最最最基础的 axios 封装，但是可扩展性较高。因为看别的文章封装的太复杂了，这里的封装形式其实可以满足大部分应用场景了。希望对你们有用

一边学习一边更新，有写的不好的地方，希望大家提出意见