二次封装企业级fetch接口请求

雨燕容若

已于 2023-01-28 14:58:28 修改

阅读量287

点赞数

文章标签：前端 react.js ajax

于 2023-01-28 14:53:00 首次发布

本文链接：https://blog.csdn.net/takeingloop/article/details/128777617

版权

在项目初构时，往往需要对接口的请求进行一个统一封装，方便后续共同开发的同时还利于维护。
整体封装也没多少技术含量，摒弃原有且繁琐的 XMLHttpRequest，采用灵活的 fetch 第三方库，对GET，POST，DELET进行二次封装，以便满足企业级需求。

需求：

拿来即用，具有常见的请求方式（GET，POST，DELET），支持对文件类的请求操作
预置不同的状态码处理
高度复用

思路：

该hooks在调用时，只需传入接口路径与参数即可
公共变量写在全局，方便后续修改
逻辑尽量抽离，保证一个函数只在做一件事。（请求头、响应结果预处理）

源码：

import fetch from 'isomorphic-fetch';
import {
    message } from 'antd';

const BASE_URL = '';
// content-type
const ContentType = {
   
  JSON: 'application/json; charset=UTF-8',
  FORM: 'application/x-www-form-urlencoded; charset=UTF-8',
};

// token header
const getTokenHeaders = () => {
   
  // TODO get the token permission request
  const token = localStorage.getItem('user_token');
  return {
   
    Accept: ContentType.JSON,
    'Content-Type': ContentType.JSON,
    Token: token,
  };
};

// handle url
const getUrl = (url) => {
   
  if (url.startsWith('http://') || url.startsWith('https://')) return url;
  return `${
     BASE_URL}${
     url}`;
};

// common check
const checkStatus = (response, type) => {
   
  if (response.status === 204) return response;
  if ([200, 201, 202].includes(response.status)) {
   
    if (type === 'file') {
   
      return response;
    }
    return response.json();
  }
  // throw new Error(response.status)
  const {
    status } = response;
  const pureResponse = response.json();
  if (type !== 'ignore') {
   
    if ([400, 500].includes(status)) {
   
      pureResponse.then((res) => {
   
        message.error(res.message || res.msg || '未知异常！');
      });
    } else