Axios request 封装最佳实践——简化代码，提高可维护性

在实际项目中，我们通常需要封装 Axios 请求，这样可以更方便地处理请求和响应，也可以统一处理请求错误等，本文将介绍 Axios request 封装的一些知识。

封装思想

我们可以将 Axios 封装成一个请求函数，传入请求配置参数，它负责发起请求。然后在请求成功时 resolve 返回数据，请求失败时 reject 返回错误。这样就可以通过 promise 方式非常方便地使用它。

基本结构如下:

function request(options) {
  return new Promise((resolve, reject) => {
    axios(options)
      .then(res => {
        resolve(res.data) 
      })
      .catch(err => {
        reject(err)
      })
  })
}

我们还可以接着封装 get、post 等方法:

function get(url, params) {
  return request({
    method: 'get',
    url,
    params
  }) 
}

function post(url, data) {
  return request({
    method: 'post',
    url,
    data
  })
}

这样我们就可以直接调用get和post方法发起对应请求了。

处理重复逻辑

我们可以把一些重复的逻辑抽离出来，比如设置 baseURL:

function request(options) {
  const instance = axios.create({
    baseURL: 'https://some-domain.com/api/',
    timeout: 5000
  })

  options = {...options, instance} // 使用创建的实例

  return new Promise((resolve, reject) => {
    instance(options)
      .then(res => {
        resolve(res.data)  
      })
      .catch(err => {
        reject(err) 
      })
  })
}

这样可以避免每次请求都要设置这些通用配置。

请求和响应拦截器

我们可以使用拦截器在发送每个请求前修改请求数据，以及在接收响应后统一处理响应结果。

// 请求拦截器
instance.interceptors.request.use(
  config => {
    // 处理请求前的逻辑...

    return config
  },
  error => {
    // 请求错误处理

    return Promise.reject(error)
  }
)

// 响应拦截器 
instance.interceptors.response.use(
  response => {
     // 处理响应数据

     return response
  },
  error => {
    // 处理响应错误

    return Promise.reject(error)
  }
)

拦截器让我们可以更加灵活自如地控制请求流程。

错误处理

我们可以通过 catch 来统一处理请求的错误。

function request(options) {
  return new Promise((resolve, reject) => {
    instance(options)
      .then(res => {
        resolve(res.data)
      })
      .catch(err => {
        // 错误处理

        reject(err) 
      })
  })
}

request(options)
  .then(res => {
    // 处理响应数据
  })
  .catch(err => {
    // 统一处理请求错误 
  })

这样可以避免每个请求都要独立处理错误的问题。

请求取消

有时候我们需要取消一个已发出的请求，Axios支持通过传递一个cancel token来取消请求:

const CancelToken = axios.CancelToken

const source = CancelToken.source()

request({
  ...,
  cancelToken: source.token
})

// 取消请求
source.cancel('Cancel request')

这样我们可以更加灵活地控制请求。

案例

下面是一个请求实例，展示了如何使用上面封装的 request 方法:

import { get, post } from './request'

get('/user', { params: { id: 12345 }})
  .then(res => {
    console.log(res)  
  })
  .catch(err => {
    console.error(err)
  })

post('/user', { user: { name: 'John' }})
  .then(res => {
    console.log(res)
  })
  .catch(err => {
    console.error(err)  
  })

通过 get 和 post 方法可以非常方便地发起对应请求，并通过 promise 处理响应结果。

提示与技巧

将 Axios 封装成一个 request 方法，传入配置参数发起请求
抽离公共配置代码如 baseURL 等
使用拦截器处理请求和响应
通过 catch 统一处理错误
支持取消请求

使用 Apifox 来 Mock 数据

Apifox 是一个比 Postman 更强大的接口测试工具，Apifox = Postman + Swagger + Mock + JMeter，Apifox 支持调试 http(s)、WebSocket、Socket、gRPC、Dubbo 等协议的接口，并且集成了 IDEA 插件。在后端人员写完服务接口时，测试阶段可以通过 Apifox 来校验接口的正确性，图形化界面极大的方便了项目的上线效率。

更为重要的是，Apifox 能够 Mock 数据，其集成了 Mock.js 库，允许你自定义规则，并且可以编写脚本，强大的 Mock 功能可以让前端开发人员不再苦苦等待后端提供接口，自己就能提前造各种各样的数据出来，可视化操作让你点点鼠标就能生成可观的人性化数据。

立即体验 Apifox

总结

正确地封装 Axios 请求可以让我们更方便地调用接口，减少重复代码，并统一处理请求错误。上面提到的都是一些比较常见的封装方式，可以根据实际需求进行灵活调整。

知识扩展：

参考：

Axios中文文档：https://www.kancloud.cn/yunye/axios/234845