这篇文章主要介绍了axios异步请求的流程与原理是什么的相关知识,内容详细易懂,操作简单快捷,具有一定借鉴价值,相信大家阅读完这篇axios异步请求的流程与原理是什么文章都会有所收获,下面我们一起来看看吧。
一、什么是axios?
axios是一个基于Promise的方法,可以发送get、post等请求,并且前后端都可以使用。
二、axios的内部原理
axios库对外暴露了一个axios实例,axios实例其中挂载了一个Axios方法,Axios方法有一个
interceptors对象
(拦截器),interceptors对象
有request对象
和response对象
,并且request对象
和response对象
都有use方法,所以,我们可以调用axios.interceptors.request.use()和axios.interceptors.response.use().interceptors对象
里面的request对象
和response对象
其实是一个用来管理拦截器的数组(handlers)。当我们调用axios.interceptors.request.use(),就会在request的拦截器数组(handlers)里面push一个成功回调和一个失败回调。每使用一次,就push一次,类似[res1,rej1,res2, rej2…]接下来是一个chain,它是一个存储所有回调的数组,因为它是给Promise使用的,所以它需要使用两个值,初始值为dispatchRequest和undefiend。接着,Promise.resolve(config).then(fn1, fn2)。当config里面的结果为fulfilled(成功),就把config里的配置传给fn1并执行。如果为reject(报错),就把错误结果传给fn2并执行.即Promise.resolve(config).then(chain[0], chain[1])。chain[0]为成功回调,chain[1]为失败回调。config里面有很多配置项,他们可能是一个string值或方法等。
接下来是整理所有的Promise,把
request数组
里的回调函数unshift到chain数组
的最前面,把response数组
里的回调函数push到chain数组
的最后面。最终chain数组
里面类似[res2, rej2,res1, rej1, dispatchRequest,undefiend,res3, rej3, res4, rej4]。dispatchRequest
是用来执行axios.request
的,dispatchRequest方法
里面有一个adapter
,它会根据不同的环境调用不同的对象。如果是在浏览器环境下,调用XMLHttpRequest对象
。如果是nodejs环境下,就调用http对象
。这就是为什么它既能在前端使用,也能在后端使用的原因。adapter
会对请求到的数据进行解析封装,封装后的对象就是我们能看到的response响应对象
。处理完
dispatchRequest
,就会执行interceptors.response
的回调函数。这就是为什么我们看到的执行顺序是,后者的interceptors.request
比前者的interceptors.requets
先执行,接着执行axios.request
,最后顺序执行interceptors.response
.接下来执行我们的业务逻辑。
三、axios的使用
1、通过使用axios的方法
常用方法:get, post, request
axios.get
axios.get('/user', {
params: {
ID: 12345
}
})
.then(function (response) {
console.log(response);
})
.catch(function (error) {
console.log(error);
})
.then(function () {
// always executed
});
axios.post
axios.post('/user', {
firstName: 'Fred',
lastName: 'Flintstone'
})
.then(function (response) {
console.log(response);
})
.catch(function (error) {
console.log(error);
});
axios.request
可以传入很多请求配置
axios.request({
url: '/user',
method: 'get', // 默认
baseURL: '/api',
//...})
2、通过传入配置方法
axios({
method: 'get',
url: 'http://bit.ly/2mTM3nY',
responseType: 'stream'})
.then(function (response) {
response.data.pipe(fs.createWriteStream('ada_lovelace.jpg'))
});
四、响应模块
响应模块有以下几个参数
{
data: {},
status: 200,
statusText: 'ok',
header: {},
config: {},
request: {}}
五、配置
1.全局axios的配置
axios.defaults.baseURL = 'https://api.example.com';
axios.defaults.headers.common['Authorization'] = AUTH_TOKEN;
axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded';
2.实例的配置
const instance = axios.create({
baseURL: 'https://api.example.com'});
instance.defaults.headers.common['Authorization'] = AUTH_TOKEN;
3.配置的优先级
const instance = axios.create();instance.defaults.timeout = 2500;instance.get('/longRequest', {
timeout: 5000});
最终timeout设置的时间是5000,所以这里面的优先级,请求里面的配置>实例化配置>axios的默认配置
六、Interceptors 拦截器
可以在请求数据之前或者接收数据之前处理数据
axios.interceptors.request.use(function (config) {
return config;
}, function (error) {
return Promise.reject(error);
});
axios.interceptors.response.use(function (response) {
return response;
}, function (error) {
return Promise.reject(error);
});
七、并发请求处理
// 把axios请求放进函数里function getUserAccount() {
return axios.get('/user/12345');}
function getUserPermissions() {
return axios.get('/user/12345/permissions');}//函数执行放到Promise里面排队,挨个响应。Promise.all([getUserAccount(), getUserPermissions()])
.then(function (results) {
const acct = results[0];
const perm = results[1];
});
关于“axios异步请求的流程与原理是什么”这篇文章的内容就介绍到这里,感谢各位的阅读!相信大家对“axios异步请求的流程与原理是什么”知识都有一定的了解,大家如果还想学习更多知识,欢迎关注编程网行业资讯频道。