您的位置:

Axios Then详解

一、基础使用

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。希望这篇文章对大家有所帮助。