欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

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

程序员文章站 2023-11-19 12:43:52
axios 是一个基于 promise 的 http 库,可以用在浏览器和 node.js 中。 在前端框架中的应用也是特别广泛,不管是vue还是react,...

axios

是一个基于 promise 的 http 库,可以用在浏览器和 node.js 中。

在前端框架中的应用也是特别广泛,不管是vue还是react,都有很多项目用axios作为网络请求库。

我在最近的几个项目中都有使用axios,并基于axios根据常见的业务场景封装了一个通用的request服务。

npm:

$ npm install axios

bower:

$ bower install axios

using cdn:

<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

业务场景:

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

默认配置

定义全局的默认配置

axios.defaults.timeout = 10000 //超时取消请求
axios.defaults.headers.post['content-type'] = 'application/json;charset=utf-8'
axios.defaults.baseurl = process.env.base_url 

自定义配置(非常见业务场景,仅作介绍)

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

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

请求及响应拦截器

请求拦截器

// 请求列表
const requestlist = []
axios.interceptors.request.use((config) => {
 //1.将当前请求的url添加进请求列表数组
 requestlist.push(config.url)
 //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.请求拦截器中将所有请求的url添加进请求列表变量,为取消请求及loading状态管理做准备
2.请求一旦开始,就可以开启动画加载效果。
3.用户登录后可以在请求头中携带token做权限校验使用。

响应拦截器

axios.interceptors.response.use(function (response) {
 // 1.将当前请求中请求列表中删除
 requestlist.splice(requestlist.findindex(item => item === response.config.url), 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 canceltoken = axios.canceltoken
//cancel token列表
let sources = []
const request = function (url, params, config, method) {
 return new promise((resolve, reject) => {
  axios[method](url, params, object.assign({}, config, {
  //1.通过将执行程序函数传递给canceltoken构造函数来创建cancel token
   canceltoken: new canceltoken(function executor (c) {
   //2.将cancel token存入列表
    sources.push(c)
   })
  })).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.router.js

...
import { sources } from '../service/request'
...
router.beforeeach((to, from, next) => {
 document.title = to.meta.title || to.name
  //路由发生变化时取消当前页面网络请求
 sources.foreach(item => {
  item()
 })
 sources.length = 0
 next()
})

request.js完整代码:

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

import axios from 'axios'
import store from '../store'
import router from '../router'

// axios.defaults.timeout = 10000
const requestlist = []

axios.defaults.headers.post['content-type'] = 'application/json;charset=utf-8'

axios.defaults.baseurl = process.env.base_url
// 自定义拦截器
axios.interceptors.request.use((config) => {
 requestlist.push(config.url)
 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) {
 requestlist.splice(requestlist.findindex(item => item === response.config.url), 1)
 if (requestlist.length === 0) {
  store.dispatch('changeglobalstate', {loading: false})
 }
 if (response.data.code === 900401) {
  window.$toast.error('认证失效,请重新登录!', 1000)
  router.push('/login')
 }
 return response
}, function (error) {
 requestlist.length = 0
 store.dispatch('changeglobalstate', {loading: false})
 if (axios.iscancel(error)) {
  throw new axios.cancel('cancel request')
 } else {
  window.$toast.error('网络请求失败!', 1000)
 }
 return promise.reject(error)
})

const canceltoken = axios.canceltoken
let sources = []

const request = function (url, params, config, method) {
 return new promise((resolve, reject) => {
  axios[method](url, params, object.assign(config, {
   canceltoken: new canceltoken(function executor (c) {
    sources.push(c)
   })
  })).then(response => {
   resolve(response.data)
  }, err => {
   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}

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。