如何在React中通过Axios编写网络请求类

以下是封装好的Axios网络请求工具类，包含常用HTTP方法封装、请求拦截器（自动携带Token、动态设置Content-Type）、响应拦截器处理：

import axios from 'axios';
import { appConstants } from '../constants/constants';

const httpClient = axios.create({
  baseURL: process.env.REACT_APP_API_ENDPOINT,
  headers: {
    'Content-Type': 'application/json',
    'Access-Control-Allow-Origin': '*'
  }
});

let authorizationHeader = '';

const onSuccess = (res) => Promise.resolve(res.data);
const onError = (response) => Promise.reject(response);

httpClient.interceptors.request.use((request) => {
  let token = "";
  if (localStorage.getItem(appConstants.LoginSessionKey) && localStorage.getItem(appConstants.LoginSessionKey).length !== 0) {
    token = localStorage.getItem(appConstants.LoginSessionKey).replace(/^"(.*)"$/, '$1');
  }
  request.headers.Authorization = "bearer " + token;
  if (request.options && request.options['iscontentSet']) {
    delete request.headers['Content-Type'];
  } else if (request.options) {
    request.headers['Content-Type'] = request.options && request.options['contentType'];
  }
  return request;
});

httpClient.interceptors.response.use((response) => {
  return response;
}, async (error) => {
  const { config: originalReq, response } = error;
  if (!originalReq.isRetryAttempt && response && response.status === 401) {
    throw error;
  } else {
    throw error;
  }
});

httpClient.interceptors.response.use(onSuccess, onError);

export default {
  getData: (url, options, responseType, queryParams) =>
    httpClient({
      method: "GET",
      url: url,
      params: queryParams,
      responseType: responseType
    }),
  postData: (url, requestBody, options) =>
    httpClient({
      method: "POST",
      url: url,
      data: requestBody,
      options: options,
    }),
  searchData: (url, requestBody, options) =>
    httpClient({
      method: "SEARCH",
      url: url,
      data: requestBody,
    }),
  putData: (url, requestBody, queryParams) =>
    httpClient({
      method: "PUT",
      url: url,
      data: requestBody,
      params: queryParams      
    }),

  /**
   * 设置Authorization请求头
   * @param {*} requestToken 
   */
   setAccessTokenAuthHeader: (requestToken) => {
    if (requestToken) {
      authorizationHeader = "bearer " + requestToken;
    }
  },

  /**
   * 在请求头中设置id_token
   * @param {*} requestToken 
   */
  setIdTokenAuthHeader: (requestToken) => {
    if (requestToken && requestToken.id_token) {
      authorizationHeader = "bearer " + requestToken.id_token;
    }
  },
  deleteData: (url, responseType, queryParams) =>
    httpClient({
      method: "DELETE",
      url: url,
      params: queryParams,
      responseType: responseType
    }),
};

调用示例 #

GET请求示例 #

import apiClient from './path-to-your-api-client';

const fetchUserData = async () => {
  try {
    const response = await apiClient.getData('/users', null, 'json', { id: 123 });
    console.log('用户数据:', response);
  } catch (error) {
    console.error('获取数据失败:', error);
  }
};

POST请求示例 #

import apiClient from './path-to-your-api-client';

const submitFormData = async () => {
  const formData = { name: 'John', email: 'john@example.com' };
  try {
    const response = await apiClient.postData('/users', formData, { contentType: 'application/json' });
    console.log('提交成功:', response);
  } catch (error) {
    console.error('提交失败:', error);
  }
};

PUT请求示例 #

import apiClient from './path-to-your-api-client';

const updateUserData = async () => {
  const updatedData = { name: 'John Doe' };
  try {
    const response = await apiClient.putData('/users/123', updatedData, { status: 'active' });
    console.log('更新成功:', response);
  } catch (error) {
    console.error('更新失败:', error);
  }
};

DELETE请求示例 #

import apiClient from './path-to-your-api-client';

const deleteUserData = async () => {
  try {
    const response = await apiClient.deleteData('/users/123', 'json', { reason: 'inactive' });
    console.log('删除成功:', response);
  } catch (error) {
    console.error('删除失败:', error);
  }
};

内容的提问来源于stack exchange，提问作者user20669732