一个比较全面的基于axios的封装

最新推荐文章于 2021-05-03 20:24:37 发布

转载最新推荐文章于 2021-05-03 20:24:37 发布 · 588 阅读

5 ·

CC 4.0 BY-SA版权

原文链接：https://mp.weixin.qq.com/s/udm_vLCgFhI2cqSH3ygn_A#rd

本文分享了一个基于axios的全面封装方法，通过自定义请求和响应拦截器，实现了错误处理和状态码映射，适用于各种项目需求。文章还介绍了如何在项目中使用此封装。

❝
以下文章来自于“前端咖”公众号
❞

在几个公司工作过，我发现我很少看到考虑的比较全面的ajax封装。可能是因为我待过的公司不够优秀吧，也可能是因为我所在的团队不够优秀吧。基于这样的一个情况，我觉得我可以写一个比较全面的基于axios的封装。

这里我只分享一个相对比较全面的基于axios的封装，如果想要更符合你项目的封装，还请自己多理解或者和我交流沟通。

「以下是基于axios封装的代码：」


/**
 * http封装请求
 */
import axios from 'axios'

// 超时时间
axios.defaults.timeout = 3000
// http请求拦截器
axios.interceptors.request.use(config => {
  return config
}, error => {
  return Promise.reject(error)
})
let erorrMap = {
  'CMN00000': '成功',
  'CMN00001': '输入参数为空',
  'CMN00002': '输入参数校验失败'
}
// http响应拦截器
axios.interceptors.response.use(res => {
  let code = res.data.code
  if (code === 'CMN00000') {
  } else {
    if (erorrMap[code]) {
      //erorrMap[code]
    } else {
      //'未知错误'
    }
  }
  return res
}, async (error) => {
  if (error.request) {
    if (error.request.status === 0) {
      debugger
      //超时
    }
  } else if (error.response) {
    if (error.response.status === 400) {

    } else if (error.response.status === 404) {
      //未找到资源
    } else if (error.response.status === 401) {
      //'请先登录'
    } else if (error.response.status === 500) {
      //'服务器异常'
    }
  }
  return Promise.reject(error)
})

let request = (config) => {
  /*let token = window.localStorage.getItem('token')
  axios.defaults.headers.common['token'] = token || ''*/
  return axios.request(
    Object.assign({
        method: 'post',
        data: {},
        params: {}
      },
      config
    )
  )
}

export default request

「基于上面的封装，我详细的做一个讲解：」

1，http请求拦截器中的第一个参数是一个函数，在其中可以给每一个请求做一些配置项的处理，比如加时间戳等等。

2，http响应拦截器中的第一个参数同样是一个函数，在其中可以处理http响应code是200时正常或者异常的情况。

3，http响应拦截器中的第二个参数同样是一个函数，在其中可以处理除了http响应code是200以外的情况，比如未登录时的401，可以跳出需要登录才可以查看操作的页面等等。

4，request方法的定义中可以在头headers中加一些token之类配置。

「当然光知道上面的基于axois的封装还不够，还得知道如何使用该封装，代码如下：」

import request from './request'
import * as url from './url'

request(
  {
    url: url.apiRegister
  }
).then((res) => {
  let code = res.data.code
  if (code === 'CMN00000') {
    //成功
  } else {
  }
}).catch((error) => {
  if (error.response) {
  } else if (error.request) {
  } else {
    console.log(error)
  }
})

「使用基于axios的封装，我详细介绍一下：」

1，request的返回的是一个promise实例，then方法中是处理http响应code是200的情况，该情况下又分成正常和异常。

2，catch方法中可以处理的异常包括请求异常和其他的异常，其中请求异常包括有数据返回的异常和没数据返回的异常，其他异常包括http请求拦截器中代码异常，http响应拦截器中的代码异常，then方法中代码异常等等。

如果你能搞清楚以上的内容，我想你应该知道如何自己封装一个比较全面的request。

感谢您的认真阅读，喜欢就点个再看吧！