五、封装axios

新建src/config/axios.tsx文件
参考网站 axios

一、安装axios

npm i axios

二、创建axios请求

export const server = axios.create({
  timeout: 6000,
  headers: {
    "Content-Type": "application/json;charset=UTF-8"
  }
});

三、添加请求拦截(当登录成功后接口需要token才有权限请求，可以在请求前统一添加token)

server.interceptors.request.use(
  function(config) {
    // 在发送请求之前做些什么（如果有token则所有请求携带token,该token存在localStorage中）
    const user = localStorage.getItem("user");
    let token = null;
    if (user) {
      const users = JSON.parse(user);
      token = users.token;
    }
    config.headers.token = token;
    return config;
  },
  function(error) {
    // 对请求错误做些什么
    return Promise.reject(error);
  }
);

四、添加响应拦截

server.interceptors.response.use(
  function(response) {
    // 对响应数据做点什么
    return response;
  },
  function(error) {
    // 对响应错误做点什么
    return Promise.reject(error);
  }
);

五、导出请求

function open(message: any) {
  Notification['error']({
    title: message,
    description: <div style={{width: 320}}>{message}</div>
  });
}

export const error = (response: any) => {
  // 请求失败提示错误信息
  open(response.data.message)
  throw new Error(response.data);
};

export const wrapServer = (opt: any) => {
  return server
    .request({
      method: "post",
      ...opt
    })
    .then(response => {
      const data = response.data;
      if (data.code === 200 || data.code === "200") {
        return data;
      } else {
        return Promise.reject(response);
      }
    })
    .catch(info => {
      return error(info);
    });
};

页面整体代码

import React from 'react';
import axios from "axios";
import { Notification } from 'rsuite';

function open(message: any) {
  Notification['error']({
    title: message,
    description: <div style={{width: 320}}>{message}</div>
  });
}

export const error = (response: any) => {
  open(response.data.message)
  throw new Error(response.data);
};

export const server = axios.create({
  timeout: 6000,
  headers: {
    "Content-Type": "application/json;charset=UTF-8"
  }
});

// 添加请求拦截器
server.interceptors.request.use(
  function(config) {
    // 在发送请求之前做些什么（如果有token则所有请求携带token,该token存在localStorage中）
    const user = localStorage.getItem("user");
    let token = null;
    if (user) {
      const users = JSON.parse(user);
      token = users.token;
    }
    config.headers.token = token;
    return config;
  },
  function(error) {
    // 对请求错误做些什么
    return Promise.reject(error);
  }
);

// 添加响应拦截器
server.interceptors.response.use(
  function(response) {
    // 对响应数据做点什么
    return response;
  },
  function(error) {
    // 对响应错误做点什么
    return Promise.reject(error);
  }
);

export const wrapServer = (opt: any) => {
  return server
    .request({
      method: "post",
      ...opt
    })
    .then(response => {
      const data = response.data;
      if (data.code === 200 || data.code === "200") {
        return data;
      } else {
        return Promise.reject(response);
      }
    })
    .catch(info => {
      return error(info);
    });
};