一、基础使用
axios是目前最为流行的一款http请求库,也成为了前端中常用的请求工具之一。Axios Then是axios中处理Promise的一种方式,它可以简化代码、规范代码语法。
首先我们需要安装axios:
npm install axios
然后我们可以使用axios来发起一个GET请求:
axios.get('/user').then(res => {
console.log(res);
});
这个请求中,我们使用了.then()方法用来处理返回的Promise。当请求返回成功时,我们就可以在这个方法中处理服务器返回的数据了。如果请求返回失败了,我们还可以使用.catch()方法来处理返回的错误:
axios.get('/user').then(res => {
console.log(res);
}).catch(err => {
console.log(err);
});
这个例子中,我们使用.catch()方法来处理请求错误。在.catch()中,我们可以将请求错误的信息输出到控制台上,方便我们进行调试。
二、Axios Then的用法
除了基础使用中的.then()和.catch()外,Axios Then还提供了其他方法来帮助我们处理Promise。下面是一些常用的方法:
1. .finally()
如果我们需要在请求结束后执行一些代码,无论请求是成功还是失败,我们就可以使用.finally()方法。这个方法会在请求结束后,不论请求成功还是失败,都会执行指定的代码:
axios.get('/user').then(res => {
console.log(res);
}).catch(err => {
console.log(err);
}).finally(() => {
console.log('请求结束');
});
2. .all()
如果我们需要并发多个请求,等到所有请求结束后再进行处理,我们就可以使用.all()方法。这个方法接收一个Promise数组作为参数,等到所有Promise都成功时,它会将所有Promise的结果放在一个数组中返回;如果有一个Promise失败了,它就会返回失败的那个Promise的错误信息:
axios.all([
axios.get('/user'),
axios.get('/post')
]).then(axios.spread((user, post) => {
console.log(user);
console.log(post);
})).catch(err => {
console.log(err);
});
需要注意的是,在.then()方法中,我们使用了axios.spread()方法来将请求的结果拆分为不同的变量,方便我们进行处理。
3. .spread()
如果我们不希望在.then()方法中使用axios.spread()方法来拆分请求结果,我们也可以直接使用.spread()方法来处理Promise。这个方法会将请求结果拆分为不同的变量,方便我们进行处理:
axios.all([
axios.get('/user'),
axios.get('/post')
]).spread((user, post) => {
console.log(user);
console.log(post);
}).catch(err => {
console.log(err);
});
三、Axios Interceptors的用法
Axios Interceptors是axios中的拦截器,它可以帮助我们在请求前或请求后进行处理。Axios Interceptors分为两类,分别是请求拦截器和响应拦截器:
1. 请求拦截器
请求拦截器可以用来在请求发送前进行一些处理,比如给请求添加一些header信息:
axios.interceptors.request.use(config => {
config.headers.token = 'xxxx';
return config;
});
这个例子中,我们使用了axios.interceptors.request.use()方法来添加一个请求拦截器。在这个请求拦截器中,我们给请求添加了一个名为token的header信息,这样在发送请求时,就会自动带上这个header信息。
2. 响应拦截器
响应拦截器可以用来在请求结束后进行一些处理,比如判断请求是否成功等:
axios.interceptors.response.use(res => {
if (res.status === 200) {
return res.data;
} else {
return Promise.reject(res);
}
});
这个例子中,我们使用了axios.interceptors.response.use()方法来添加一个响应拦截器。在这个响应拦截器中,我们判断了请求的状态码,如果是200,就返回请求的数据;否则,就返回失败的Promise,这样我们就可以在.catch()方法中进行处理了。
小结
本文主要介绍了axios的.then()方法和Axios Then的用法,以及Axios Interceptors的用法,让我们可以更方便、更规范地处理Promise。希望这篇文章对大家有所帮助。