如何定义Axios错误响应的类型

Question

我打电话给API。我可以从Axios Response.Data 中收到两种响应类型。如果是200。 iindustrygrouplist 如果它的另一个错误（如400

export const GetIndustry = async () => {
    const base = Config.api_url;
    const endpoint = "/api/industry";
    const url = base + endpoint;

    try {
        const response = await HttpClient.get<IIndustryGroupList[]>(url, options);
        return [response, null] as const;
    } catch (err: any) {
        // here we can receive the axios response for a 400.
        return [null, err.response] as const;
    }
};

。代码> iapierRorresponse 。更具体地说 axios.Response.data 应为类型 iapierRorresponse

用法

const [response, error] = await GetIndustry();

// response.data of type IIndustryGroupList
// error.data of type IAPIErrorResponse

Answer 1

我不确定您要实现的目标，但这肯定会给您达到想要的东西：

import axios, {
  AxiosRequestConfig,
  AxiosResponse,
} from 'axios';

type IIndustryGroupList = {
  somedata: string[]
}

type IAPIErrorDATA = {
  someerrorobject: object
}

type IAPIErrorResponse = {
  message: string,
  status: 400,
  data: IAPIErrorDATA
}

type ObjectWithProperty<P extends string> = {
  [K in P]: unknown
} & {
  [key: string]: unknown
}

const Config = {
  api_url: 'http://example.com',
};

/**
 *  Asserts that an object has a given property
 * @param value
 * @param property
 * @returns
 */
const objHasProperty = <P extends string>(
  value: unknown,
  property: P,
): value is ObjectWithProperty<P> => {
  if (typeof value !== 'object' || value === null) return false;
  if (property in value) return true;
  return false;
};

/**
 * Checks if an object is of `IAPIErrorResponse` type
 * @param response
 * @returns
 */
const isIAPIErrorResponse = (
  response: unknown,
): response is IAPIErrorResponse => {
  if (
    typeof response !== 'object'
    || response === null
  ) return false;

  if (
    objHasProperty(response, 'status')
    && objHasProperty(response, 'data')
    && response.status === 400
    // AND SOME OTHER CHECKS THAT ASSERT
    // YOUR OBJECT IS OF TYPE IAPIRESPONSE
  ) return true;

  return false;
};

/**
 * The HTTP client
 */
const HttpClient = {
  async get<T>(
    url: string,
    options: AxiosRequestConfig,
  ) {
    return axios.get<T>(url, options);
  },
};

/**
 * Your function
 * @returns
 */
export const GetIndustry = async (): Promise<
  [AxiosResponse<IIndustryGroupList[], any>, null]
| [null, IAPIErrorResponse]
> => {
  const base = Config.api_url;
  const endpoint = '/api/industry';
  const url = base + endpoint;
  const options = {};

  try {
    const response = await HttpClient.get<IIndustryGroupList[]>(
      url,
      options,
    );

    return [response, null];
  } catch (err: unknown) {
    if (
      objHasProperty(err, 'reponse')
      && isIAPIErrorResponse(err.response)
    ) return [null, err.response];

    const errMsg = `Unknown error${
      objHasProperty(err, 'message')
        ? `: ${err.message}.`
        : '.'
    }`;
    throw new Error(errMsg);
  }
};

(async () => {
  const [response, error] = await GetIndustry();
  if (error) {
    const r = response;
    // Here response is of type null
    const e = error;
    // And error is of type IAPIErrorResponse
    const { data } = error;
    // HERE! Data is of type IAPIErrorDATA
  } else {
    const { data } = response;
    // Here data is of type IIndustryGroupList[]
    const e = error;
    // And error is of type null
  }
})();

TSPlayground

Answer 2

您可以按照以下方式进行操作：

const response = await HttpClient.get<IIndustryGroupList[] | IAPIErrorResponse>(url, options);