为啥能在浏览器和node环境下同时使用
因为通关xmlHttpRequest和process判断环境,执行不同的
function getDefaultAdapter() {
var adapter;
if (typeof XMLHttpRequest !== 'undefined') {
// For browsers use XHR adapter
adapter = require('./adapters/xhr');
} else if (typeof process !== 'undefined' && Object.prototype.toString.call(process) === '[object process]') {
// For node use HTTP adapter
adapter = require('./adapters/http');
}
return adapter;
}
一、axios 取消场景
var CancelToken = axios.CancelToken;
var source = CancelToken.source();
axios.get(‘/user/12345’, {//get请求在第二个参数
cancelToken: source.token
}).catch(function(thrown) {
});
axios.post(‘/user/12345’, {//post请求在第三个参数
name: ‘new name’
}, {
cancelToken: source.token
});
source.cancel(‘不想请求了’);
二、前台Vue、后台Django、设置axios解决csrf_token问题.md
import Axios from 'axios'
let getCookie = function (cookie) {
let reg = /csrftoken=([\w]+)[;]?/g
return reg.exec(cookie)[1]
}
Axios.interceptors.request.use(
function(config) {
// 在post请求前统一添加X-CSRFToken的header信息
let cookie = document.cookie;
if(cookie && config.method == 'post'){
config.headers['X-CSRFToken'] = getCookie(cookie);
}
return config;
},
function(error) {
// Do something with request error
return Promise.reject(error);
}
);
三、二次封装
1为防止发起请求时,当前正在进行的相同请求,在请求拦截器中加入了hash判断,将相同请求url拦截
2将axios中get,post公共配置抽离出来
3get,post请求的封装可能你会问,这里的axios返回的就是promise对象,为什么还要再次对get,post封装一次promise.因为我这边的话,在开发中使用async await会出现数据请求失败的情况,报的错就是返回的不是promise对象。(ps:可async await返回的就是promise呀,这个问题后续再搞一下)就直接return了一个promise对象,以避免上面的错误。下面是请求接口的一个例子
//引入axios
import axios from 'axios'
let cancel ,promiseArr = {}
const CancelToken = axios.CancelToken;
//请求拦截器
axios.interceptors.request.use(config => {
//发起请求时,取消掉当前正在进行的相同请求
if (promiseArr[config.url]) {
promiseArr[config.url]('操作取消')
promiseArr[config.url] = cancel
} else {
promiseArr[config.url] = cancel
}
return config
}, error => {
return Promise.reject(error)
})
//响应拦截器
axios.interceptors.response.use(response => {
return response
}, error => {
return Promise.resolve(error.response)
})
axios.defaults.baseURL = '/api'
//设置默认请求头
axios.defaults.headers = {
'X-Requested-With': 'XMLHttpRequest'
}
axios.defaults.timeout = 10000
export default {
//get请求
get (url,param) {
return new Promise((resolve,reject) => {
axios({
method: 'get',
url,
params: param,
cancelToken: new CancelToken(c => {
cancel = c
})
}).then(res => {
resolve(res)
})
})
},
//post请求
post (url,param) {
return new Promise((resolve,reject) => {
axios({
method: 'post',
url,
data: param,
cancelToken: new CancelToken(c => {
cancel = c
})
}).then(res => {
resolve(res)
})
})
}
}
拦截器配合loading和message组件,可以很好的用户体验。
拦截器