Question

ReactJs 如何在 axios 中添加拦截器

2023-01-21

6277

reactjs axios

我已经为此工作了几个小时，但我不知道哪里出了问题。我想为我的 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
      })
  };

我收到以下错误

services_axiosHandler__WEBPACK_IMPORTED_MODULE_0 _.get is not a function

我读过很多其他解决方案，但我找不到导致我出现错误的区别。我哪里做错了？

谢谢

Answer 1

在 axios.index 内

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...
  }

}

最后但并非最不重要的一点是，在使用回调（then/catch）时不应使用 await