axios简介及二次封装

前言

这篇文章主要对axios及其封装进行介绍，包括axios的简介、进行axios封装的原因、以及axios封装的实现。

axios简介

axios是我们进行前端开发时常用的一种与后端接口交换数据的网络请求库。

axios是基于promise实现的，作用于node.js和浏览器中。在服务端它使用原生 node.js http 模块, 而在客户端 (浏览端) 则使用 XMLHttpRequests。

axios的特性

从浏览器创建 XMLHttpRequests —— 在客户端即浏览器中，axios是基于XMLHttpRequests实现的。
从 node.js 创建 http 请求 —— 在服务端中，axios是基于原生的node.js的http模块实现的。
支持 Promise API —— axios的实现是基于Promise实现的，所以支持Promise API。
拦截请求和响应 —— axios可以对网络请求进行请求拦截和响应拦截，在响应的拦截中进行响应的处理。
转换请求和响应数据 —— 可以在请求拦截器和响应拦截器中对请求和响应的数据进行处理。
自动转换JSON数据 —— axios可以自动将请求的数据转换为JSON数据，自动将响应的JSON数据转换为普通的前端数据。
获取浏览器和 node.js 的请求进度，并提供额外的信息（速度、剩余时间）
取消请求 —— 从 v0.22.0 开始，Axios 支持以 fetch API 方式(AbortController)取消请求
客户端支持防御XSRF

进行axios封装的原因

使用axios发送一个GET请求：

// 向给定ID的用户发起请求  
axios.get('/user?ID=12345',{  
    params: {  //发送请求的数据
    ID: 12345  
    }  
})  
.then(function (response) {  
    // 处理成功情况  
    console.log(response);  
})  
.catch(function (error) {  
    // 处理错误情况  
    console.log(error);  
})  
.finally(function () {  
    // 总是会执行  
});

// 支持async/await用法  
async function getUser() {  
    try {  
        const response = await axios.get('/user?ID=12345');  
        console.log(response);  
    } catch (error) {  
        console.error(error);  
    }  
}

在项目中如果使用如上这种方式进行接口请求，因为我们大多数页面需要的接口都不止一个，所以我们的组件中就很可能出现多行重复代码。随着项目的体量越来越大，发送的请求越来越多，我们的项目就会变得难以维护。

而进行axios封装会产生许多好处：

统一处理请求和响应：封装能够让我们在一个地方统一处理所有的HTTP请求和响应。
简化API调用：通过封装axios，我们为每一个API接口创建一个函数，这样在进行这个接口请求时只需要调用对应的函数即可。
提高代码的可维护性：因为我们对axios进行了封装，如果对一些接口的配置需要进行修改时，我们只需要在封装的地方进行修改就可以应用到所有的接口请求。而如果没有进行axios封装，那么需要修改的地方就非常多了。

axios封装示例

我在进行axios封装时习惯在项目的./src/utils目录下创建一个request.js的文件，在request.js文件中编写axios封装的代码。进行axios封装可以按照如下的步骤进行。

创建axios实例：在创建axios实例前需要先引入axios

//引入axios
import axios from 'axios'

// 创建axios实例
const axiosEp = axios.create({
  //base接口，表示请求URL的公共部分
  baseURL:'http://127.0.0.1:8888/api/',
  // 超时
  timeout: 30000
  //还可以进行一些其他的配置
})

设置请求拦截器：在请求拦截器中可以进行一些在请求发送前需要进行的操作，如对请求数据的处理。另外，在请求拦截器中还可以进行请求拦截的错误处理。

axiosEp.interceptors.request.use(config => {
  
  //配置请求头，以下是一个示例，设置语言为简体中文
  config.headers.lang = 'zh-CN'

  //对请求数据进行处理
  
  return config
}, error => {
  console.log('请求拦截器错误', error)
  //请求拦截错误处理
  
})

设置响应拦截器：在响应拦截器中可以进行一些响应数据的处理，并且对异常响应进行相应的错误处理，当然在响应拦截器中还可以进行一些其他的操作，一切都取决于你的需求。（请求拦截器同理）

axiosEp.interceptors.response.use(async(res) => {
      //根据自己的需求进行代码的编写，以下是一些示例

      // 获取错误信息
      const message = res.data.message 

      //通过响应码的不同进行不同的处理
      if (code === 404) {
         //响应码为404时的处理

      } else if (code === 402) {
         //响应码为402时的处理

      } else {
        //响应码为其他类型时的处理
      }

      return res.data
    }, async error => {
      //响应发生错误时的处理

      console.log('error')

      return false
    }
)

编写接口请求函数：引入封装的axios请求，设置接口的地址、请求的方式、请求的数据等。

import axiosEp from '@/utils/request'

// 获取用户信息
export function getUserInfo(data) {
  return axiosEp({
    url: `/user/getUserInfo`, //请求的接口地址
    method: 'post', //请求的方式
    data //请求的数据
  })
}

调用接口请求函数：调用封装的函数，传入请求的数据。

const res = await getUserInfo({userId:1234567})

总结

axios是一个基于XMLHttpRequest的发送AJAX请求的库，是前端开发中常用的一种发送网络请求的方式。在实际的项目开发过程中，对axios进行封装是很有必要的，对axios进行封装的方式也并不复杂。可以根据项目的需求对封装的内容进行修改，比如修改请求拦截器的内容等。

总之，axios封装是前端开发者需要了解一个知识点。