vue中如何实现axios的二次封装

本篇内容主要讲解"vue中如何实现axios的二次封装"，感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷，实用性强。下面就让小编来带大家学习"vue中如何实现axios的二次封装"吧!

axios

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

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

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

npm:

$ npm install axios

bower:

$ bower install axios

Using cdn:

业务场景：

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/axiosimport axios from 'axios'import store from '../store'import router from '../router'// axios.defaults.timeout = 10000const 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.CancelTokenlet 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}

到此，相信大家对"vue中如何实现axios的二次封装"有了更深的了解，不妨来实际操作一番吧！这里是网站，更多相关内容可以进入相关频道进行查询，关注我们，继续学习！