ReactJS应用程序中设置Axios拦截器方法demo

时间:2022-12-13 Jovie 人气:0

简介

在这篇文章中，我们将学习如何干净地设置Axios以实现代码的可读性和可重用性。我们之前已经学习了如何在我们的reactJS应用程序中设置Axios 。因此，不要浪费任何时间，让我们直接进入它。

当我们学会了如何发送HTTPS请求和接收响应时，我们与服务器进行数据通信，每次都必须使用响应中的解构数据。如果我告诉你Axios为你提供了一个内置的机制，以更简洁的方式处理所有这些麻烦，你会怎样？

Axios中的拦截器

有了Axios拦截器， 你现在可以在请求和响应被then()或catch()块处理之前拦截和钩住它们。让我们看看它们的作用，在config目录下制作https.js，就像这样

配置目录下的HTTPS文件

现在编写代码，在Axios中使用拦截器

import axios from "axios";
export const axiosInstance = axios.create({
  baseURL: "https://swapi.dev/api/",
});
axiosInstance.interceptors.request.use(
  function (config) {
    // Do something before request is sent
    return config;
  },
  function (error) {
    // Do something with request error
    return Promise.reject(error);
  }
);
axiosInstance.interceptors.response.use(
  function (response) {
    return response;
  },
  function (error) {
    return Promise.reject(error);
  }
);

在这里，我们为Axios实例创建了拦截器，处理请求和响应，这使得我们的代码可以重复使用，并且可读。

拦截器还允许我们在请求中添加或定制我们的头信息，方法如下

axiosInstance.interceptors.request.use(
  async (config) => {
    const token = # Your token goes over here;
    if (token) {
      config.headers.accessToken = token;
    }
    return config;
  },
  function (error) {
    return Promise.reject(error);
  }
);

我们已经知道了如何在我们的reactJS应用中使用Axios，在这一章中介绍了如何通过使用拦截器来充分利用Axios的优势，更多关于ReactJS设置Axios拦截器的资料请关注其它相关文章！

加载全部内容