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

axios

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

业务场景：

  1. 全局请求配置。
  2. get,post,put,delete等请求的promise封装。
  3. 全局请求状态管理。
  4. 取消重复请求。
  5. 路由跳转取消当前页面请求。
  6. 请求携带token，权限错误统一管理。

默认配置


定义全局的默认配置


axios.defaults.timeout = 10000 //超时取消请求
axios.defaults.headers.post[‘Content-Type‘] = ‘application/json;charset=UTF-8‘
axios.defaults.baseURL = process.env.BASE_URL //挂载在process下的环境常量，在我另一篇文章有详细说明

如何定义多环境常量


自定义配置（非常见业务场景，仅作介绍）


// 创建实例时设置配置的默认值
var instance = axios.create({
  baseURL: ‘https://api.another.com‘
});
// 在实例已创建后修改默认值
instance.defaults.headers.common[‘Authorization‘] = AUTH_TOKEN;

优先级：自定义配置 > 默认配置

请求及响应拦截器

请求拦截器及取消重复请求


// 请求列表
const requestList = []
// 取消列表
const CancelToken = axios.CancelToken
let sources = {}
axios.interceptors.request.use((config) => {
  //将请求地址及参数作为一个完整的请求
  const request = JSON.stringify(config.url) + JSON.stringify(config.data)
  config.cancelToken = new CancelToken((cancel) => {
    sources[request] = cancel
  })
  //1.判断请求是否已存在请求列表，避免重复请求，将当前请求添加进请求列表数组；
  if(requestList.includes(request)){
    sources[request](‘取消重复请求‘)
  }else{
    requestList.push(request)
    //2.请求开始，改变loading状态供加载动画使用
    store.dispatch(‘changeGlobalState‘, {loading: true})
  }
  //3.从store中获取token并添加到请求头供后端作权限校验
  const token = store.getters.userInfo.token
  if (token) {
    config.headers.token = token
  }
  return config
}, function (error) {
  return Promise.reject(error)
})

1.请求拦截器中将所有请求添加进请求列表变量，为取消请求及loading状态管理做准备；当请求列表已存在当前请求则不响应该请求。
2.请求一旦开始，就可以开启动画加载效果。
3.用户登录后可以在请求头中携带token做权限校验使用。


响应拦截器


axios.interceptors.response.use(function (response) {
  // 1.将当前请求中请求列表中删除
  const request = JSON.stringify(response.config.url) + JSON.stringify(response.config.data)
  requestList.splice(requestList.findIndex(item => item === request), 1)
  // 2.当请求列表为空时，更改loading状态
  if (requestList.length === 0) {
    store.dispatch(‘changeGlobalState‘, {loading: false})
  }
  // 3.统一处理权限认证错误管理
  if (response.data.code === 900401) {
    window.ELEMENT.Message.error(‘认证失效，请重新登录！‘, 1000)
    router.push(‘/login‘)
  }
  return response
}, function (error) {
  // 4.处理取消请求
  if (axios.isCancel(error)) {
    requestList.length = 0
    store.dispatch(‘changeGlobalState‘, {loading: false})
    throw new axios.Cancel(‘cancel request‘)
  } else {
    // 5.处理网络请求失败
    window.ELEMENT.Message.error(‘网络请求失败‘, 1000)
  }
  return Promise.reject(error)
})

1.响应返回后将相应的请求从请求列表中删除
2.当请求列表为空时，即所有请求结束，加载动画结束
3.权限认证报错统一拦截处理
4.取消请求的处理需要结合其他代码说明
5.由于项目后端并没有采用RESTful风格的接口请求，200以外都归为网络请求失败

promise封装


const request = function (url, params, config, method) {
  return new Promise((resolve, reject) => {
    axios[method](url, params, Object.assign({}, config)).then(response => {
      resolve(response.data)
    }, err => {
      if (err.Cancel) {
        console.log(err)
      } else {
        reject(err)
      }
    }).catch(err => {
      reject(err)
    })
  })
}

const post = (url, params, config = {}) => {
  return request(url, params, config, ‘post‘)
}

const get = (url, params, config = {}) => {
  return request(url, params, config, ‘get‘)
}
//3.导出cancel token列表供全局路由守卫使用
export {sources, post, get}

1.axios cancel token API
2.存入需要取消的请求列表导出给导航守卫使用
3.路由发生变化的时候取消当前页面还没有返回结果的请求，在复杂的页面中请求可能会有很多个，增加取消请求的功能可以让页面切换的时候不卡顿。
/src/router.js


...
import { sources } from ‘../service/request‘
...
router.beforeEach((to, from, next) => {
  document.title = to.meta.title || to.name
    //路由发生变化时取消当前页面网络请求
  Object.keys(sources).forEach(item => {
    sources[item](‘取消前页面请求‘)
  })
  for (var key in sources) {
    delete sources[key]
  }
  next()
})

request.js完整代码：



// 引入网络请求库 https://github.com/axios/axios

import axios from ‘axios‘
import store from ‘../store‘
import router from ‘../router‘

// 请求列表
const requestList = []
// 取消列表
const CancelToken = axios.CancelToken
let sources = {}

// axios.defaults.timeout = 10000
axios.defaults.headers.post[‘Content-Type‘] = ‘application/json;charset=UTF-8‘

axios.defaults.baseURL = process.env.BASE_URL

axios.interceptors.request.use((config) => {
  const request = JSON.stringify(config.url) + JSON.stringify(config.data)

  config.cancelToken = new CancelToken((cancel) => {
    sources[request] = cancel
  })

  if(requestList.includes(request)){
    sources[request](‘取消重复请求‘)
  }else{
    requestList.push(request)
    store.dispatch(‘changeGlobalState‘, {loading: true})
  }

  const token = store.getters.userInfo.token
  if (token) {
    config.headers.token = token
  }

  return config
}, function (error) {
  return Promise.reject(error)
})

axios.interceptors.response.use(function (response) {
  const request = JSON.stringify(response.config.url) + JSON.stringify(response.config.data)
  requestList.splice(requestList.findIndex(item => item === request), 1)
  if (requestList.length === 0) {
    store.dispatch(‘changeGlobalState‘, {loading: false})
  }
  if (response.data.code === 900401) {
    window.ELEMENT.Message.error(‘认证失效，请重新登录！‘, 1000)
    router.push(‘/login‘)
  }
  return response
}, function (error) {
  if (axios.isCancel(error)) {
    requestList.length = 0
    store.dispatch(‘changeGlobalState‘, {loading: false})
    throw new axios.Cancel(‘cancel request‘)
  } else {
    window.ELEMENT.Message.error(‘网络请求失败‘, 1000)
  }
  return Promise.reject(error)
})

const request = function (url, params, config, method) {
  return new Promise((resolve, reject) => {
    axios[method](url, params, Object.assign({}, config)).then(response => {
      resolve(response.data)
    }, err => {
      if (err.Cancel) {
        console.log(err)
      } else {
        reject(err)
      }
    }).catch(err => {
      reject(err)
    })
  })
}

const post = (url, params, config = {}) => {
  return request(url, params, config, ‘post‘)
}

const get = (url, params, config = {}) => {
  return request(url, params, config, ‘get‘)
}

export {sources, post, get}

以上。

来源：https://segmentfault.com/a/1190000016474460

原文地址：https://www.cnblogs.com/qixidi/p/10137924.html

时间： 2024-10-13 10:15:06

axios基于常见业务场景的二次封装的相关文章

wpf企业级开发中的几种常见业务场景

前阵子在公司弄个内部的进销存管理系统,从了解需求.系统设计到编码,大约耗费了两个月时间,后来公司有了其他的安排,这东西就算黄了.顺便吐槽一下,厂里的一些人说话真心不顾别人感受,邮件啥的没一句舒服的.不过以前在别的地方干活都是很多人弄,一直都是按领导的意思办即可,基本上不怎么跟人打交道,不能保持淡定的心态说明还是too young了点,这也算是个历练吧. 弄这个项目,好歹也辛苦了一阵子,另外细节方面感觉自己差不多做到位了,也算尽心了.这里先附几张效果图,接下来将针对几种常见的业务场景抠出一些代码,

android基于开源网络框架asychhttpclient,二次封装为通用网络请求组件

网络请求是全部App都不可缺少的功能,假设每次开发都重写一次网络请求或者将曾经的代码拷贝到新的App中,不是非常合理,出于此目的,我希望将整个网络请求框架独立出来,与业务逻辑分隔开,这样就能够避免每次都要又一次编写网络请求,于是基于我比較熟悉的asynchttpclient又一次二次封装了一个网络请求框架. 思路:网络请求层唯一的功能就是发送请求,接收响应数据,请求取消,cookie处理这几个功能,二次助封装后这些功能能够直接调用封装好的方法就可以. 二次助封装代码例如以下: 1.功能接口: /

Vue.js 自定义组件封装实录——基于现有控件的二次封装（以计时器为例）

在本人着手开发一个考试系统的过程中,出现了如下一个需求:制作一个倒计时的控件显示在试卷页面上.本文所记录的就是这样的一个过程. 前期工作 对于这个需求,自然我想到的是有没有现成的组件可以直接使用(本着不重复发明轮子的原则).于是我就在 GitHub 上找寻.确实找到了不少,但是与需求之间的差距还比较大.从零开始写又不太现实(时间摆在那里,加之自己的前端也是刚学,还没有从零开始手撸一个控件的能力),所以在已有组件的基础上进行二次封装便成了一个比较可行的方法(几乎也是唯一解).遂在 npm 上以 c

Redis常见业务场景应用

一定时间范围内不可重复发短信问题 Redis实现消息队列 Redis实现Session共享 ...

基于ant design form的二次封装

// standardForm.js import React, { PureComponent } from 'react'; import PropTypes from 'prop-types'; import { Form, Input, Row, Col, Button } from 'antd'; const FormItem = Form.Item; // 默认的layout export const defaultLabelColSpan = 8; const defaultFor

python+selenium十：selenium的二次封装

from selenium import webdriverfrom selenium.webdriver.support.wait import WebDriverWaitfrom selenium.webdriver.support import expected_conditions as ECfrom selenium.webdriver.support.select import Selectfrom selenium.webdriver.common.action_chains im

基于递归算法，树形结构数据下业务场景，封装解决方法

一.递归算法 1.概念简介 递归算法的核心思想是通过将问题重复分解为同类的或其子问题的方式,从而可以使用统一的解决方式.很多编程语言支持方法或函数自我调用,简单的说,就是在函数或方法体内,自身可以再次调用自身的方法结构. 2.基础案例 这里通过递归的方式,计算阶乘.求和等相关逻辑. public class Demo01 {     public static void main(String[] args) {         int result1 = factorial(5);      

双态运维分享之：业务场景驱动的服务型CMDB

最近这几年,国内外CMDB失败的案例比比皆是,成功的寥寥可数,有人质疑CMDB is dead?但各种业务场景表明,当下数据中心运维,CMDB依然是不可或缺的一部分,它承载着运维的基础,掌握运维的命脉. 分析以往失败的案例,静静的想一想,失败无非两点: 一.CMDB自身建设能力不够,无法适应当下数据中心和云环境的新形势.当下数据中心的特点是敏捷.动态.持续发展.甚至当风暴来临时,数据中心的环境是瞬息万变.传统型CMDB跟不上节奏,只能望洋兴叹,频繁应付处理各式各样的问题. 二.非场景驱动,无法支

受教了，memcache比较全面点的介绍，受益匪浅,适用memcached的业务场景有哪些？memcached的cache机制是怎样的？在设计应用时，可以通过Memcached缓存那些内容？

基本问题 1.memcached的基本设置 1)启动Memcache的服务器端 # /usr/local/bin/memcached -d -m 10 -u root -l 192.168.0.200 -p 12000 -c 256 -P /tmp/memcached.pid -d选项是启动一个守护进程, -m是分配给Memcache使用的内存数量,单位是MB,我这里是10MB, -u是运行Memcache的用户,我这里是root, -l是监听的服务器IP地址,如果有多个地址的话,我这里指定了服