ReactJs如何在axios中添加拦截器

vbkedwbf 于 2023-01-25 发布在 iOS

关注(0)|答案(1)|浏览(166)

我已经为此工作了几个小时，但我不知道哪里出了问题。我想为我的ReactJs安装一个axios拦截器
这是我的拦截器axiosHandler.js

import axios from "axios";

const axiosHandler = axios.create({
  baseURL: process.env.REACT_APP_BASE_URL,
  headers: {
    Accept: "application/json",
  },
});

axiosHandler.interceptors.request.use(
  (config) => {
    const token = localStorage.getItem("token");
    if (token) {
      config.headers["Authorization"] = "Bearer " + token;
    }
    return config;
  },
  (error) => {
    Promise.reject(error);
  }
);

//axiosHandler.interceptors.response

export default axiosHandler;

下面是我如何在其他组件中使用处理程序

import axiosHandler from "../services/axiosHandler";

const getData = async () => {
    await axiosHandler
      .get(`/path`)
      .then((response) => {
        //do something
      })
  };

我得到的错误为

服务_axiosHandler__WEBPAC_IMPORTED_MODULE_0 *_.get不是函数

我读过很多其他的解决方案，但是我找不到不同之处，因为它如何导致我的错误。我把它错在哪里？
谢谢

axios

来源：https://stackoverflow.com/questions/75192420/reactjs-how-to-add-interceptor-in-axios

1条答案

按热度按时间

lvmkulzt1#

内部轴索引

import axios from "axios";
import { API_URL } from "../config/config";

const axiosHttp = axios.create({
  baseURL: `${API_URL}`,
});

axiosHttp.interceptors.request.use(
  (config) => {
    const token =  "Your Token here"
    return {
      ...config,
      headers: {
        ...(token !== null && { Authorization: `${token}` }),
        ...config.headers,
      },
    };
  },
  (error) => {
    return Promise.reject(error);
  }
);

axiosHttp.interceptors.response.use(
  (response) => {
    //const url = response.config.url;

    //setLocalStorageToken(token);
    return response;
  },
  (error) => {
    if (error.response.status === 401) {
      //(`unauthorized :)`);
      //localStorage.removeItem("persist:root");
      //removeLocalStorageToken
      //window.location.href = "/login";
    }
    return Promise.reject(error);
  }
);

export default axiosHttp;

然后在你的API函数中使用它，如下所示

import axiosHttp from "./utils/axios"; 

const getData = async ()=>{
  try{
     const response = await axiosHttp.get('/path')
     return resposne;

  }
  catch(error){
     //handle error here...
  }

}

最后但并非最不重要的一点是，在使用callback（然后是/catch）时，不应该使用await

赞(0）回复(0）举报 2023-01-25

我来回答

ReactJs如何在axios中添加拦截器

1条答案

相关问题

热门标签

最新问答