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

原创文章，作者：小蓝，如若转载，请注明出处：https://www.506064.com/n/270137.html