Axios是什么?
Axios 是一个基于 promise 的 HTTP 库,可以用在浏览器和 node.js 中。是现在在项目中用的较多的并且比较好用的网络库。
Axios用来干什么?
Axios主要是用于向后台发起请求的,还有在请求中做更多是可控功能。我用的比较多的就是请求拦截(避免重复请求)
基本使用请参考官方文档:https://www.kancloud.cn/yunye/axios/234845
下面是曾经一个实际项目中对Axios的二次封装的解析:
1. 引入axios,自定义配置并实例化一个对象 http
2. 配置拦截重复请求的变量与方法
3. 拦截器的配置 ==>> 划重点
3.1 先看看官网的例子,请求拦截 / 响应拦截
3.2 自己封装的请求拦截
3.3 自己封装的响应拦截
4. 请求地址的统一处理(是否使用代理)
5. 请求方式 get / post 的封装
6. 最后导出,并挂载到vue的全局即可
7. 实际使用
7.1 使用post请求
7.2 使用get请求
完整代码
import Vue from 'vue'
import axios from 'axios'
import router from '@/router'
import qs from 'qs'
import merge from 'lodash/merge'
import { clearLoginInfo } from '@/utils'
const http = axios.create({
timeout: 1000 * 30,
withCredentials: true,
headers: {
'Content-Type': 'application/json; charset=utf-8'
}
})
// 正在请求的请求url数组
let pending = [];
// 是否正在请求
let isPending = url => pending.includes(url);
// 移除完成的请求
let removePending = url => {
let index = pending.findIndex(item => item === url);
pending.splice(index, 1);
};
/**
* 请求拦截
*/
http.interceptors.request.use(config => {
if(!config.headers.noIntercept && isPending(config.url)) {
//终止请求
console.log(config.url)
return Promise.reject(new Error('重复请求已被拦截!'));
}
pending.push(config.url);
config.headers['token'] = Vue.cookie.get('token') // 请求头带上token
return config
}, error => {
return Promise.reject(error)
})
/**
* 响应拦截
*/
http.interceptors.response.use(response => {
removePending(response.config.url);
if (response.data && response.data.code === 401) { // 401, token失效
clearLoginInfo()
router.push({ name: 'login' })
}
return response
}, error => {
pending = [];
return Promise.reject(error)
})
/**
* 请求地址处理
* @param {*} actionName action方法名称
*/
http.adornUrl = (actionName) => {
// 非生产环境 && 开启代理, 接口前缀统一使用[/proxyApi]前缀做代理拦截!
return (process.env.NODE_ENV !== 'production' && process.env.OPEN_PROXY ? '/proxyApi' : window.SITE_CONFIG.baseUrl) + actionName
}
/**
* get请求参数处理
* @param {*} params 参数对象
* @param {*} openDefultParams 是否开启默认参数?
*/
http.adornParams = (params = {}, openDefultParams = true) => {
var defaults = {
't': new Date().getTime()
}
return openDefultParams ? merge(defaults, params) : params
}
/**
* post请求数据处理
* @param {*} data 数据对象
* @param {*} openDefultdata 是否开启默认数据?
* @param {*} contentType 数据格式
* json: 'application/json; charset=utf-8'
* form: 'application/x-www-form-urlencoded; charset=utf-8'
*/
http.adornData = (data = {}, openDefultdata = true, contentType = 'json') => {
var defaults = {
't': new Date().getTime()
}
data = openDefultdata ? merge(defaults, data) : data
return contentType === 'json' ? JSON.stringify(data) : qs.stringify(data)
}
export default http
文章仅为本人学习过程的一个记录,仅供参考,如有问题,欢迎指出!