亲宝软件园·资讯

展开

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

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拦截器的资料请关注其它相关文章!

加载全部内容

相关教程
猜你喜欢
用户评论