资讯专栏INFORMATION COLUMN

上云采购季！| 爆款云服务器低至4.6元/月，首单享0.9折

免费试用
首页/文章专栏/axios 的二次封装（拦截重复请求、异常统一处理）

axios 的二次封装（拦截重复请求、异常统一处理）

luzhuqun / 1786人阅读

摘要：拦截重复请求如何标识每个请求下面函数，通过一个请求参数中的请求传递参数或请求传递参数来表示每一个请求。

一直想封装一下 axios， 可以方便项目中使用，今天有时间，就好好研究了一下。

源码： 
// util/axios.js
import axios from "axios"

const pending = {}
const CancelToken = axios.CancelToken
const removePending = (key, isRequest = false) => {
  if (pending[key] && isRequest) {
    pending[key]("取消重复请求")
  }
  delete pending[key]
}
const getRequestIdentify = (config, isReuest = false) => {
  let url = config.url
  if (isReuest) {
    url = config.baseURL + config.url.substring(1, config.url.length)
  }
  return config.method === "get" ? encodeURIComponent(url + JSON.stringify(config.params)) : encodeURIComponent(config.url + JSON.stringify(config.data))
}

// 请求拦截器
axios.interceptors.request.use(config => {
  // 拦截重复请求(即当前正在进行的相同请求)
  let requestData = getRequestIdentify(config, true)
  removePending(requestData, true)

  config.cancelToken = new CancelToken((c) => {
    pending[requestData] = c
  })

  return config
}, error => {
  return Promise.reject(error)
})

// 异常处理
axios.interceptors.response.use(response => {
  // 把已经完成的请求从 pending 中移除
  let requestData = getRequestIdentify(response.config)
  removePending(requestData)

  return {
    code: response.status,
    message: response.statusText,
    data: response.data
  }
}, err => {
  if (err && err.response) {
    switch (err.response.status) {
      case 400:
        err.message = "错误请求"
        break
      case 401:
        err.message = "未授权，请重新登录"
        break
      case 403:
        err.message = "拒绝访问"
        break
      case 404:
        err.message = "请求错误,未找到该资源"
        break
      case 405:
        err.message = "请求方法未允许"
        break
      case 408:
        err.message = "请求超时"
        break
      case 500:
        err.message = "服务器端出错"
        break
      case 501:
        err.message = "网络未实现"
        break
      case 502:
        err.message = "网络错误"
        break
      case 503:
        err.message = "服务不可用"
        break
      case 504:
        err.message = "网络超时"
        break
      case 505:
        err.message = "http版本不支持该请求"
        break
      default:
        err.message = `连接错误${err.response.status}`
    }
    let errData = {
      code: err.response.status,
      message: err.message
    }
    // 统一错误处理可以放这，例如页面提示错误...
    console.log("统一错误处理: ", errData)
  }

  return Promise.reject(err)
})

axios.defaults.baseURL = "http://localhost:3000/"

export default (instance) => {
  instance.prototype.axios = (data) => {
    var _params = {
      method: !data.method ? "get" : data.method.toLowerCase(),
      url: data.url
    }
    if (_params.method === "get") {
      _params.params = data.params || {}
    } else {
      _params.data = data.params || {}
    }

    return new Promise((resolve, reject) => {
      axios(_params).then(response => {
        resolve(response)
      }).catch(error => {
        reject(error)
      })
    })
  }
}
调用： 
// main.js
import axios from "./util/axios"

Vue.use(axios)
// HelloWorld.vue
  methods: {
    getUserInfo (_id) {
      this.axios({
        url: "/users",
        method: "get",
        params: { "id": _id }
      }).then(response => {
        console.log(response)
      })
    }
  }
说明： 全局的 axios 默认值

本人使用 json-server 搭建 mock 服务（这个，有必要的话，之后会写一下），服务器地址为http://localhost:3000/，所以设置 axios 的 基础URL路径设置为http://localhost:3000/。

另外，大家有需要的话，也可以对 axios.defaults.headers 默认的请求头、axios.defaults.timeout请求超时时间 进行设置。这里就不设置了。

axios.defaults.baseURL = "http://localhost:3000/"
get、post请求的封装

这里，get、post 请求具体调用的时候，都通过 this.axios(requestData)来调用，其中 requestData有统一的格式，如下

const requestData = {
  url: "/users", // 必填
  method: "get", // 选填，默认 "get"
  params: {} // 选填，默认 {}
}

这部分通过 requestData.method处理 axios发送请求时，requestData.params 是赋值给 _params.params（get 请求传递参数） 还是赋值给 _params.data（post 请求传递参数）。

export default (instance) => {
  instance.prototype.axios = (data) => {
    var _params = {
      method: !data.method ? "get" : data.method.toLowerCase(),
      url: data.url
    }
    if (_params.method === "get") {
      _params.params = data.params || {}
    } else {
      _params.data = data.params || {}
    }

    return new Promise((resolve, reject) => {
      axios(_params).then(response => {
        resolve(response)
      }).catch(error => {
        reject(error)
      })
    })
  }
}
拦截重复请求 如何标识每个请求

下面函数，通过一个请求参数中的 url, params（get 请求传递参数）或 data（post 请求传递参数）来表示每一个请求。

使用请求路径加请求参数的标识方式，避免了相同请求路径，不同请求参数的情况下的错误拦截。

其中需要注意的地方是，请求拦截器中 config.url = "/users", 响应拦截器中 config.url = "http://localhost:3000/users"，所以加上一个标识isReuest来计算请求的全路径

/**
 * config: 请求数据
 * isReuest: 请求拦截器中 config.url = "/users", 响应拦截器中 config.url = "http://localhost:3000/users"，所以加上一个标识来计算请求的全路径
 */
const getRequestIdentify = (config, isReuest = false) => {
  let url = config.url
  if (isReuest) {
    url = config.baseURL + config.url.substring(1, config.url.length)
  }
  return config.method === "get" ? encodeURIComponent(url + JSON.stringify(config.params)) : encodeURIComponent(config.url + JSON.stringify(config.data))
}
请求拦截器

使用 cancel token 取消请求。

这里每个请求通过传递一个 executor 函数到 CancelToken 的构造函数来创建 cancel token。

// 添加请求拦截器
axios.interceptors.request.use(config => {
  // 发送请求之前，拦截重复请求(即当前正在进行的相同请求)
  let requestData = getRequestIdentify(config, true)
  removePending(requestData, true)

  config.cancelToken = new CancelToken((c) => {
    pending[requestData] = c
  })

  return config
}, error => {
  return Promise.reject(error)
})
取消请求

这一步是结合上面的请求拦截器执行的，取消重复请求的同时删除记录，并且在下面的响应拦截器也会调用该函数，即完成请求后删除请求记录。

// key: 请求标识；isRequest 完成请求后也需要执行删除记录，所以添加此参数避免执行无用操作
const removePending = (key, isRequest = false) => {
  if (pending[key] && isRequest) {
    pending[key]("取消重复请求")
  }
  delete pending[key] // 把这条记录从 pending 中移除
}
请求异常处理

可以使用响应拦截器来统一处理请求异常，例如，统一返回的数据的格式、统一处理异常报错...

// 异常处理
axios.interceptors.response.use(response => {
  // 把已经完成的请求从 pending 中移除
  let requestData = getRequestIdentify(response.config)
  removePending(requestData)

  return {
    code: response.status,
    message: response.statusText,
    data: response.data
  }
}, err => {
  if (err && err.response) {
    switch (err.response.status) {
      case 400:
        err.message = "错误请求"
        break
      case 401:
        err.message = "未授权，请重新登录"
        break
      case 403:
        err.message = "拒绝访问"
        break
      case 404:
        err.message = "请求错误,未找到该资源"
        break
      case 405:
        err.message = "请求方法未允许"
        break
      case 408:
        err.message = "请求超时"
        break
      case 500:
        err.message = "服务器端出错"
        break
      case 501:
        err.message = "网络未实现"
        break
      case 502:
        err.message = "网络错误"
        break
      case 503:
        err.message = "服务不可用"
        break
      case 504:
        err.message = "网络超时"
        break
      case 505:
        err.message = "http版本不支持该请求"
        break
      default:
        err.message = `连接错误${err.response.status}`
    }
    let errData = {
      code: err.response.status,
      message: err.message
    }
    // 统一错误处理可以放这，例如页面提示错误...
    console.log("统一错误处理: ", errData)
  }

  return Promise.reject(err)
})
疑问：

CancelToken 这一部分，还不是很清楚原理，希望大家指导一下~~~

参考地址：

axios 的 github 地址
https://segmentfault.com/a/11...
https://www.jianshu.com/p/444...

云服务器 私有云 网络请求异常拦截 java异常拦截处理 视频服务器的二次开发 二次封装

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/97903.html

相关文章

  • axios基于常见业务场景的二次封装

    摘要：是一个基于的库，可以用在浏览器和中。我在最近的几个项目中都有使用，并基于根据常见的业务场景封装了一个通用的服务。业务场景全局请求配置。请求携带，权限错误统一管理。 axios axios 是一个基于 promise 的 HTTP 库，可以用在浏览器和 node.js 中。在前端框架中的应用也是特别广泛，不管是vue还是react，都有很多项目用axios作为网络请求库。我在最近的几个项...

    JasinYip 评论0 收藏0

  • axios基于常见业务场景的二次封装(更新)

    摘要：时隔一年再次更新下根据项目下常见业务场景对的二次封装功能实现兼容浏览器避免缓存减少或更新重复请求接口域名使用环境变量全局状态可关闭的全局错误提醒可开启携带全局分页参数拦截器请求拦截器请求开始请求出错响应拦截器请求结束请求错误处理网络请求中， 时隔一年再次更新下根据vue项目下常见业务场景对axios的二次封装 功能实现：1.兼容ie浏览器避免缓存2.减少或更新重复请求3.接口域名使用环...

    dailybird 评论0 收藏0

  • axios入门实践

    摘要：使用了拦截器处理相关问题，这样就不再需要使用来做错误的处理。万恶的拦截器一些处理无论是对成功的处理还是对失败的处理，如果拦截器不抛出错误，那么终将还会执行里面处理请求成功的函数，即使你返回。 一 前言 本文适合刚接触axios或者使用过几次的同学来分享交流一些入门经验，本文同样适用熟悉axios的同学来作为参考手册。默认你已经看过axios的相关文档：axios文档 GitHub，通过...

    kamushin233 评论0 收藏0

  • axios二次封装

    摘要：给用户以提示，在封装对应的或者的时候把一些固定必传的参数加上去，写其他请求时加上改请求的其他参数就好了超时的设置，以及超时后的一些处理，是重新请求还是做其他操作。 import axios from axios import qs from qs import ErrorCode from ./error//封装code错误时对应的提示 import router from ../ro...

    pakolagij 评论0 收藏0

  • Vue开发总结 及 一些最佳实践 （已更新）

    摘要：基本开发环境创建的项目，作为代码编写工具插件推荐插件配置文章目录项目目录结构介绍框架选择处理请求二次封装项目目录结构简介业务相关静态文件全局组件基础样式布局样式及工具引入请求配置路由全局状态管理工具文件入口文件主要配置文件页面检查配置测试 基本开发环境 vue-cli3 创建的项目，vscode 作为代码编写工具vscode插件推荐：vscode 插件配置 文章目录 项目目录结构介绍...

    NotFound 评论0 收藏0

发表评论

登陆后可评论

0条评论

luzhuqun

男|高级讲师
我要私信

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<