如何设置Axios拦截器来处理带有刷新标记的HTTP调用Axios是一个现代的、流行的基于承诺的HTTP客户端，我们用它

Axios是一个现代的、流行的基于承诺的HTTP客户端，我们用它来执行HTTP请求。它支持所有的现代浏览器，也包括旧的浏览器。它允许用户进行XMLHttpRequests与服务器交互。它还允许拦截请求和响应，允许用户设置响应超时，在客户端提供对XSRF的保护，支持PromiseAPI，允许取消请求，允许请求和响应数据转换，并为JSON数据提供自动转换。

Axios还有很多其他功能，包括配置默认值、错误处理、取消请求、自动将JavaScript对象序列化为JSON等等。在这篇文章中，我们将学习如何设置axios拦截器来处理带有刷新令牌的HTTP调用。

安装

# Using NPM
npm install --save axios

# Using Yarn
yarn add axios

什么是拦截器？

一般来说，拦截器是一个为每一个HTTP请求而调用的函数，应用程序会收到响应。换句话说，Axios拦截器是一个被Axios调用的函数，在转发每个请求之前对其进行更新/转换，在返回响应之前对其进行检查/过滤。简而言之，你可以在请求或响应被then或catch处理之前拦截它们。

在被.then()或.catch()处理之前，拦截器有一个功能，允许应用程序拦截请求或响应。
为了访问数据，每个HTTP请求都需要一个头的属性来验证请求数据的应用程序是否被允许。

有时返回的HTTP响应是400或500坏响应代码状态。在这些时候，你可能想自动重试请求或验证被拒绝的授权是否仍然有效。

拦截请求

下面的例子展示了如何设置Axios请求拦截器。一般来说，有两个函数接受Axios拦截器。如果是一个有效的、成功的请求，请求拦截器的第一个函数会修改请求，第二个函数会在请求无效并抛出错误时发挥作用，等等。

这个特殊的拦截器的主要用途是当应用程序向支持服务的URL之一发出HTTP请求时。Axios会以机器人的方式给请求附加一个头，并在状态中保留用户名。如果HTTP请求并不总是向其中一个服务发出，拦截器就不会做任何事情来改变请求，而是让它在没有改变的情况下通过。

在某些情况下，如果请求是畸形的，第二个error()函数会启动并抛出一个拒绝请求的错误，这就给出了它发生的原因。

Axios在文件的顶部用ES6导入语法进行导入，就可以使用了。这里我们在这个例子中使用ES6的箭头函数。

Intercepting Requests

创建Axis实例

Create Axis Instance

Axios请求拦截器实例

Axios Request Interceptor Example

拦截响应

响应拦截器内有两个执行参数，它可以接受。主要功能是一旦响应回来，也许是一个200或201状态代码的HTTP响应，因此第二个功能是当它是一个站立状态代码，不在200或201状态代码范围内。

一个HTTP响应从服务中返回时，出现了401未经授权的错误；因此，动机是递给响应拦截器内部的主要参数是未定义。如果响应是一些200的响应，Axios拦截器并不关心。

如果HTTP响应是401，二级函数（originalRequestRetry()函数）会被触发，并检查登录用户的证书是否仍然有效，因为401表示用户的授权令牌、cookie或会话用户已经过期。假设用户的会话确实已经过期。

在这种情况下，如果这不是401的原因，那么应用程序将通过注销用户并提示他们重新登录来终止会话，用户将能够继续他们的会议。

有时会出现抛出内部服务器错误，其中状态代码为500/501/502/503。在这种情况下，我们必须通过应用程序内部的服务器错误信息来显示一个信息。

雇佣React Native开发者

Axios响应拦截器实例

Axios Response Interceptor Example

如果请求再次失败，并且服务器继续以401状态代码回来，它将会进入无限循环。为了处理这个问题，我们倾向于在初始请求（config）中使用一个标志决定_retry。_retry在我们第一次遇到401状态时即将为真。

刷新令牌

刷新令牌意味着当我们的请求在这个时候以状态代码401失败时，应用程序显示错误，并且由于会话超时而不能运行。

对于这个问题，我们已经通过调用reAuth API发布了refresh_Token，并通过向API提供设备令牌获得了新的access_token。

获取刷新令牌的完整例子

Full Example For Getting Refresh token

HTTPS服务调用

通过这个HttpService调用，我们必须给出API_URL和参数，这些参数用于调用我们的API来获取数据并将其显示给我们的应用程序或从我们的应用程序发布。在这个HttpService调用中，我们必须写出我们的Axios函数，它调用CRUD操作来创建/发布、读取/获取、更新和删除。

在这里，我们已经在拦截器中给出了我们的头，所以我们不需要所有的这些。我们只需要传递我们的参数来获得我们的响应。

一个HTTPS服务的完整例子

Full Example Of An HTTPService

在下面这个函数中，我们把我们的API_URL和必要的参数传给函数，通过给出API_URL和参数。这就给出了响应和错误。

因此，在我们的行动中，我们必须得到我们的响应来传递我们的组件。当响应状态代码为200或201时，我们知道API调用是成功的，通过成功的API调用，我们得到了我们所需的响应，以供使用。

下面是一个HTTP服务组件的例子

Example Of An HTTP Service Component

coma

总结

在这篇博客中，我们看到了如何使用Axios拦截器函数来拦截每个请求，用授权头、API密钥等来更新请求。如果一切都像这样设置，我们就可以转发请求了。一旦请求被解决，就可以获取响应，并在应用程序中执行操作。