一、前言

注意:本教程需要你对axios有一定的了解,不适用于小白(只能借鉴,希望你能自己动手),注释都写的很清楚。此封装并非完整版,已进行部分删减修改操作,但仍然适用于大部分业务场景,如果不适用于你项目的特定业务场景,请自行修改。


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

Axios的特性如下:

  • 从浏览器中创建 XMLHttpRequests
  • 从 node.js 创建 http 请求
  • 支持 Promise API
  • 拦截请求和响应
  • 转换请求数据和响应数据
  • 取消请求
  • 自动转换 JSON 数据
  • 客户端支持防御 XSRF

二、安装及其使用

安装

使用 npm:

$ npm install axios

使用 bower:

$ bower install axios

使用 cdn:

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

三、开始封装

axios封装 (api.js)

import axios from 'axios'                       //网络请求组件
import Qs from 'qs' //数据解析库(使用JSON亦可,本文未使用QS,如需要,可替换JSON为QS)
import { Message } from 'element-ui' //element组件,本文使用message消息提示(可根据自行需要进行替换其他TOAST)
import router from '../router' //路由引入,拦截访问,进行路由跳转
import * as api from '../api/commonApi' //封装axios请求组件,在特定业务场景使用里面的请求
import store from '../store/index' //axios网络封装请求开始 var service = axios.create({
// process.env.NODE_ENV获取当前业务场景的环境,以使用不同的api地址。API_ROOT为自定义api请求地址(请自行替换)
baseURL: process.env.NODE_ENV === 'production' ? process.env.API_ROOT : process.env.NODE_ENV === 'presentation' ? process.env.API_ROOT : process.env.API_ROOT,
timeout: 100000,
})
//获取登录时存储的sessionStorage
let getToken = window.sessionStorage.getItem('token');
//进行数据格式的转换
let parseToken = JSON.parse(getToken);
//拦截网络请求开始
service.interceptors.request.use(config => {
// 判断token是否存在,如果存在,就给请求头加上token
if (sessionStorage.getItem('token')) {
config.headers.Authorization = parseToken.token_type +" "+ parseToken.access_token;
}
// 检测如果请求为post,进行转换为JSON字符串(一般情况下不需要)
if (config.method === 'post') {
config.data = JSON.stringify(config.data)
}
// 设置请求头
// 请求头常见的有以下几种方式,可根据需要自行修改
// ’application/json’,’application/x-www-form-urlencoded’,’multipart/form-data’
// config.headers = {
// 'Content-Type':'application/x-www-form-urlencoded'
// }
return config;
},error => {
// 请求错误消息提示
Message({
message: error.message,
type: "error"
});
return Promise.reject(error.data.error.message);
}); //返回状态判断(添加响应拦截器)
service.interceptors.response.use(response => { return response
// 返回数据进行消息提示
if(!response.data){
Message({
message: "数据响应失败",
type: "warning"
});
}
},error => {
//获取错误信息
const config = error.config
//判断错误信息的url是否为刷新接口的url,process.env.API_ROOT请自行替换为请求地址,如:192.168.1.1
if(config.url === process.env.API_ROOT +"/refreshToken"){
Message({
message: '数据刷新失败,请重新登录再进行操作。',
type: 'error',
duration: 1.5 * 1000
})
//清除vuex及其sessionStorage等信息
store.commit('remove_login_info')
//进行路由跳转
router.push('/login')
return
}
//拦截response 返回状态码,如果为401需要重新进行token刷新,调用请求并传入参数
if (error.response.status === 401) {
const refresh = new Promise((resolve, reject) => {
api.refreshToken(store.state.usertonken.refresh_token).then((resp) => {
if(resp.data.code === 2000000){
this.loginloading = true;
//重新添加token到sessionStorage
window.sessionStorage.setItem('token',JSON.stringify(resp.data.data))
//用vuex重新设置基本信息
store.commit('add_login_info',resp.data.data)
this.loginloading = false;
//修改_retry
config._retry = true;
let getToken = window.sessionStorage.getItem('token');
//进行数据格式的转换
let parseToken = JSON.parse(getToken);
//修改原请求的token
config.headers.Authorization = parseToken.token_type + " " +parseToken.access_token;
config.baseURL = '';
resolve(axios(config));
}
}).catch(function (error) {
return Promise.reject(error);
});
});
return refresh;
} //拦截response 返回状态码,如果为400进行错误消息提示
if (error.response.status === 400) {
Message({
// message:error.response.data.err_msg,
message:'操作失败',
type: "warning",
duration: 1.5 * 1000
});
}
//拦截response 返回状态码,如果为403进行错误消息提示
if (error.response.status === 403) {
Message({
message: '暂无权限,请重新登录再进行操作。',
type: 'error',
duration: 1.5 * 1000
})
//清除vuex及其sessionStorage等信息
store.commit('remove_login_info')
//进行路由跳转
this.$router.push({path:'/login'})
}
return Promise.reject(error);
} );
service.install = (Vue) => {
Vue.prototype.$http = axios
} export default service

刷新token的方法


import api from './api' //引入axios网络请求封装组件 //进行请求方法的封装,并传入请求参数(非必需)
//token刷新方法
export function refreshToken(refresh_token){
let data = { refresh_token}
return fetch({
url:'refreshToken',
method: 'post',
data,
})
}

调用方式

import api from './api'

api({
url: '请求地址',
method: 'post',
data: 请求参数
}).then((resp) => {
console.log(resp.data)
})

后记

此封装纯属个人自用,为了方便大家使用,已进行部分修改和整理。如果你有任何疑问或者建议,欢迎留言进行评论。如果你觉得帮助到了你,请分享给更多的人。感谢你的支持!!!

Axios 网络请求组件封装 (鉴权、刷新、拦截)的更多相关文章

  1. AFNetworking 2.5.x 网络请求的封装

    AFNetworking 2.5.x 网络请求的封装 源码地址 https://github.com/YouXianMing/Networking 说明 1. 将block形式的请求转换成用代理来处理 ...

  2. 十. Axios网络请求封装

    1. 网络模块的选择 Vue中发送网络请求有非常多的方式,那么在开发中如何选择呢? 选择一:传统的Ajax是基于XMLHttpRequest(XHR) 为什么不用它呢?非常好解释配置和调用方式等非常混 ...

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

    网络请求是全部App都不可缺少的功能,假设每次开发都重写一次网络请求或者将曾经的代码拷贝到新的App中,不是非常合理,出于此目的,我希望将整个网络请求框架独立出来,与业务逻辑分隔开,这样就能够避免每次 ...

  4. Angular网络请求的封装

    很多时候,我很喜欢angular的编码风格,特别是angular支持typescript之后,完整的生命周期,完美的钩子函数,都是别的语言所无法替代的.这里我来说说我自己的网络请求封装,某种意义上来说 ...

  5. IOS开发之—— 在AFN基础上进行的网络请求的封装

    网络请求的思路:如果请求成功的话AFN的responseObject就是解析好的. 1发送网络请求:get/post/或者别的 带上URL,需要传的参数 2判断后台网络状态码有没有请求成功: 3 请求 ...

  6. 关于ajax网络请求的封装

    // 封装的ajax网络请求函数// obj 是一个对象function AJAX(obj){ //跨域请求        if (obj.dataType == "jsonp") ...

  7. Swift3.0 Alamofire网络请求的封装(get,post,upload图片上传)转

    转自: http://blog.csdn.net/C_calary/article/details/53193747 学习Swift 试着动手写个天气小app,搜集资料这个封装还蛮好用的. 我用的第三 ...

  8. iOS-在AFN基础上进行网络请求的封装

    网络请求的思路:如果请求成功的话AFN的responseObject就是解析好的. 1发送网络请求:get/post/或者别的 带上URL,需要传的参数 2判断后台网络状态码有没有请求成功: 3 请求 ...

  9. Go+gRPC-Gateway(V2) 微服务实战,小程序登录鉴权服务(五):鉴权 gRPC-Interceptor 拦截器实战

    拦截器(gRPC-Interceptor)类似于 Gin 中间件(Middleware),让你在真正调用 RPC 服务前,进行身份认证.参数校验.限流等通用操作. 系列 云原生 API 网关,gRPC ...

随机推荐

  1. 杭电 1012 u Calculate e【算阶乘】

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=1012 解题思路:对阶乘递归求和 反思:前面3个的输出格式需要注意,可以自己单独打印出来,也可以在for ...

  2. JS中常见问题

    //s金额 n保留几位小数 默认保留两位小数 s代表金额,n代表保留的小数位数 function formatMoney(s, n) { n = n > 0 && n <= ...

  3. type="radio"样式修改

    input[type=radio],input[type=checkbox] { display: inline-block; vertical-align: middle; width: 20px; ...

  4. python tips:类与实例的属性问题

    实例是具象化的类,它可以作为类访问所有静态绑定到类上的属性,包括类变量与方法,也可以作为实例访问动态绑定到实例上的属性. 实例1: class A: work = list("hello&q ...

  5. BZOJ 1725: [Usaco2006 Nov]Corn Fields牧场的安排 状压动归

    Description Farmer John新买了一块长方形的牧场,这块牧场被划分成M列N行(1<=M<=12; 1<=N<=12),每一格都是一块正方形的土地.FJ打算在牧 ...

  6. react 简单在页面中输出一段文字

    之前用脚手架创建了一个react项目,将react自带的src文件夹删除后创建一个空的src文件夹 在src文件夹中创建一个index.jsx文件作为JS入口文件并创建一个hello组件 现在我们进入 ...

  7. 简述Web Service通讯技术的搭建流程

    Web Service 基本概念 Web Service也叫XML Web Service WebService是一种可以接收从Internet或者Intranet上的其它系统中传递过来的请求,轻量级 ...

  8. ES scroll(ES游标) 解决深分页

    ES scroll(ES游标) 解决深分页. Why 当Elasticsearch响应请求时,它必须确定docs的顺序,排列响应结果.如果请求的页数较少(假设每页20个docs), Elasticse ...

  9. 双向链表的实现与操作(C语言实现)

    双向链表也叫双链表,是链表的一种,它的每一个数据结点中都有两个指针,分别指向直接后继和直接前驱.所以,从双向链表中的随意一个结点開始,都能够非常方便地訪问它的前驱结点和后继结点. 单链表的局限 1.单 ...

  10. 《Javascript权威指南》学习笔记之十五:BOM之源---window对象

    BOM是Browser Object Model的缩写,即浏览器对象模型,提供了独立于网页内容和浏览器窗体之间进行交互的APi.API由若干对象组成,因为浏览器是Javascript的宿主,因此,这些 ...