fetch二次封装，基于公司项目

前言

如果你的公司项目中用的是fetch，那么二次封装fetch是非常有必要的，你就不用再每个组件中引入fetch，设置请求的配置，以及校验后端传回的状态码，axios中有请求、响应拦截，但可惜的是fetch并没有提供这两个拦截器，所以本文就是相当于封装fetch请求配置，以及实现拦截器功能

一、使用场景

当你需要获取后端数据时，你就可以通过fetch调用接口，获取数据

二、使用方法

准备工作，安装插件

插件信息：安装fetch和为了兼容老版本浏览器的es6语法
安装依赖包：npm i whatwg-fetch es6-promise
注意：接口请求失败时，添加了报错提示框，本文使用antd的提示框，大家可以结合自己项目的情况，而替换掉

1、fetch请求封装(utils/request.js)

// fetch请求封装
import 'whatwg-fetch'
import 'es6-promise'
// import { message } from 'antd'

/**
 * 将对象转成 a=1&b=2的形式
 * @param obj 对象
 */
function obj2String(obj, arr = [], idx = 0) {
  for (let item in obj) {
    arr[idx++] = [item, obj[item]]
  }
  return new URLSearchParams(arr).toString()
}

/**
 * 请求封装
 * @param url 请求地址
 * @param params 请求参数
 * @param method 请求方式
 */
export default ({ url, params, method = 'GET' }) => {
  return new Promise((resolve, reject) => {
    const searchStr = obj2String(params)
    let initObj = {
      method: method,
      credentials: 'include',
    }
    if (method === 'GET') {
      // GET请求，拼接url
      url += '?' + searchStr
    } else {
      // POST请求，请求配置
      initObj = {
        ...initObj,
        ...{
          headers: new Headers({
            Accept: 'application/json',
            'Content-Type': 'application/x-www-form-urlencoded',
          }),
          body: searchStr,
        },
      }
    }
    fetch(url, initObj)
      .then((res) => res.json())
      .then((res) => {
        // const messageStr = res.message || ''
        // 响应状态码校验
        switch (res.status) {
          case 404:
          	// 报错提示框
            // message.error(messageStr)
            reject(res)
            return
        }
        resolve(res)
      })
  })
}

2、接口封装(api/index.js)

import request from '@/utils/request'

/**
 * 获取列表请求封装
 * @param {Object} 请求参数
 */
export const getList = (params) =>
  request({
    url: '/***', // 接口url
    method: 'GET',
    params,
  })

3、调用

import { getList } from '@/api'

getList().then((res) => {
  console.log('接口返回的数据==>', res)
})

---

三、总结

封装特点

1、低耦合：即封装了fetch返回的固定格式，又封装了接口调用
2、可读性高：功能方法单独抽离，可快速定位
3、便于维护：根据不同类型的业务需求，彼此关联度低

---

觉得本文写的不错的，希望点赞、收藏、加关注，每月不定期更新干货哦，谢谢您嘞！

你可能感兴趣的文章：

• react router路由跳转传参
• React Hook的使用
• React与Vue的区别和对比