使用 axios多个文件处理 API 错误响应

如何解决使用 axios多个文件处理 API 错误响应

我是 React 的新手，我试图将我的 Axios http 实用程序分离到不同的文件中。

如果我使用正确的凭据登录它工作正常，但是当我尝试错误的凭据并且我的 API 响应带有 401（错误凭据）消息时，Axios 执行 then() 方法而不是 catch() 方法。

axios.ts

import Axios from "axios";

const JSON_CONTENT_TYPE = "application/json";

// axios configuration
const axios = Axios.create({
  baseURL: process.env.REACT_APP_API_URL,responseType: "json"
});

// ... other requests handlers

export const post = <T = any>(
  url: string,body: any,params?: any,contentType = JSON_CONTENT_TYPE
) => {
  return axios.post<T>(url,body,{
    params,headers: { "Content-Type": contentType }
  });
};

登录适配器.ts

import { ILogin } from "../../model/login.model";
import * as Http from "../axios";
import * as StorageManager from "../storage-manager";

type TokenBody = {
  id_token: string;
};

export const login = (credentials: ILogin) => {
  return new Promise((resolve,reject) => {
    Http.post<TokenBody>("/authenticate",credentials)
      .then((resp) => {
        // Stores jwt in local/session storage.
        // HERE IS WHEN MY APP CRASHES,The error says 'resp is undefined' and THIS ERROR (not the response from my API) is caught by the catch method below.
        StorageManager.setToken(resp.data.id_token,credentials.rememberMe);
        // Does another request to get user info.
        Http.get("/account").then(console.log);
        resolve("Success");
      })
      .catch((error) => reject("Error," + error.response.data)); // THIS SHOULD SEND THE ERROR MESSAGE TO LoginPage.tsx
  });
};

LoginPage.tsx

import { FormEvent,useState } from "react";
import "../../styles/LoginPage.css";
import * as LoginAdapter from "../../adapters/loginAdapters/login-adapter";
import { RouteComponentProps } from "react-router-dom";

const LoginPage = ({history}: RouteComponentProps) = {
  const [email,setEmail] = useState("");
  const [password,setPassword] = useState("");
  const [rememberMe,setRememberMe] = useState(false);

  const submit = (e: FormEvent<HTMLFormElement>) => {
    LoginAdapter.login({ email,password,rememberMe })
      .then(() => {
        history.push("/admin/courses");
      })
      .catch((error) => {
        console.log(error);
      });
    e.preventDefault();
  }
  
  return (
    <form onSubmit={submit}>
      {/* <input ... email,and 'remember me' form fields.*/}
    </form>
  );
}

export default LoginPage;

当我直接从包中使用 axios 时。 (import axios from "axios") 它完美地工作。但是我必须重写我的api端点，响应类型，拦截器等。我不知道为什么它不起作用，我错过了什么吗？