axios 是一个流行的 JS HTTP client 库。

下面是一个封装 axios 用于项目中使用的例子。同时它使用了 axios-case-converter 默认将字段名从 under_scores 形式转化成 camelCase 形式，以配合我使用 Django / DRF 作 API server 时输出的下划线字段名，转换成 JS 惯用的 camelCase。

// utils/api.js
import axios from 'axios';
import applyCaseMiddleware from 'axios-case-converter'

const defaults = {
  baseURL: process.env.API_URL || 'http://localhost:8000',
  headers: () => ({
    'Content-Type': 'application/json',
  }),
  error: {
    // 按你的 API 设计中出错时的回包格式进行设计
    detail: "Server error.",
  },
};

const api = (method, url, variables) =>
  new Promise((resolve, reject) => {
    const client = applyCaseMiddleware(axios.create());
    client.request({
      url: `${defaults.baseURL}${url}`,
      method,
      headers: defaults.headers(),
      params: method === 'get' ? variables : undefined,
      data: method !== 'get' ? variables : undefined,
    }).then(
      response => {
        resolve(response.data);
      },
      error => {
        // 按你的 API 设计中出错时的回包格式进行设计
        if (error.response) {
          reject(error.response);
        } else {
          reject(defaults.error);
        }
      },
    );
  });

export default {
  get: (...args) => api('get', ...args),
  post: (...args) => api('post', ...args),
  put: (...args) => api('put', ...args),
  patch: (...args) => api('patch', ...args),
  delete: (...args) => api('delete', ...args),
};