efetch-api 概述

efetch-api 全称: enhance fetch api

描述:

• 主要对 JS 原生 fetch 请求方法进行封装，如果直接使用原生 fetch 请求会相对来说会有点不舒服（个人观点）

  • 因为 fetch 中没有响应的 "快捷请求" 方式（如像 axios 一样的 "axios.get / axios.post / ..."）
  • 在 GET/Head 请求中不能配置 body 参数、在其它请求中如果配置了 body 参数，还必须要手动配置对应的 Content-type 请求头（容易忘记）
  • ...

• 该库封对 fetch 的封装:

  • 封装了对应的 "快捷请求" 方式，使其可以更快速的发送对应类型的请求
  • 新增 GET/HEAD 请求时的 parmas 参数（qs），使其可以以对象的方式传入 query string 类型的请求参数
  • 如果配置项配置 body 会有对应的错误提示，提示需要配置 header 中需要的 "Content-Type" 项（该属性常用的值也配置了 TS 类型提示，可快速对应常用的值...）
  • 允许 body 传入的是一个普通对象，如果是普通对象内部将自动通过 "JSON.stringify" 进行转换成 json 字符串格式
  • 可通过 EFetch 类创建 efetch 实例，并可通过 instanceConfig 参数配置对应的 baseURL / interceptors / ...
  • 可通过配置项传入对应 response 解析类型，使其在内部自动解析
  • TS 类型提示，基本上都有对应的代码提示...
  • ...

安装:

• npm i efetch-api

基本使用

1. 默认导出 efetch 实例:

• import efetch from "efetch-api" // -- 导入 efetch 实例（EFetch）
    
  /**
   * request 实例默认请求方法，最后带 * 的为必传参数 --> 反之为可选参数
   * @param url 请求地址 *
   * @param config 配置对象 --> 不指定 method 时，默认 GET 请求
   * @param parseType 指定内部自动解析 response 的类型，返回解析后服务器返回的数据 --> 默认: undefined 不进行解析
   * @returns 
   */
  	// -- 1. 默认 GET 请求
      efetch.request("http://47.121.143.202:3000/banner?type_id=0") 
          .then(res => res.json()) // -- 默认不对 response 进行解析
          .then(res => {
              console.log(res);
          })
    
  	// -- 2. 如果为 GET/HEAD 请求可以在 config 中通过 parmas 传参
      efetch.request("http://47.121.143.202:3000/banner", { 
          params: {
              type_id: 0
          }
      })
          .then(res => res.json())
          .then(res => {
              console.log(res);
          })
    	
  	// -- 3. 如果不想像上面手动通过一个 then 先对 response 进行解析，可以在传入第三个参数，指定解析类型（内部自动解析）
      efetch.request(
          "http://47.121.143.202:3000/banner",
          {
              params: { type_id: 0 }
          },
          "json" // -- 可取值: "json" / "arrayBuffer" / "blob" / "text" /"formData" 根据服务器返回的数据可进行对应的解析
      ).then((res) => {
          console.log("请求成功:", res); // -- 该拿到的 res 就为解析后的 response（即: 服务器真正返回的数据）
      }).catch((reason) => {
          console.log("请求失败:", reason);
      })
    
  	// -- 4. 在 config 中指定 method 等参数同理...（会自动判断是否可传 body | parmas 配置项）.... --> 略
    
  	// ....

• /** 快捷请求: 对应使用方式与上面的 efetch.request 的基本一致
      + get
      + post
      + put
      + patch
      + delete
      + head
      + ...
   */
      // -- 如 get/post
  	efetch.get("http://47.121.143.202:3000/banner?type_id=0",{}, "json")
          .then((res) => {
              console.log("请求成功:", res);
          }).catch((reason) => {
              console.log("请求失败:", reason);
          })
    
      efetch.post("http://47.121.143.202:3000/banner", {
          body: JSON.stringify({
              type_id: 0
          }),
          headers: {
              "Content-Type": "application/x-www-form-urlencoded"
          }
      }, "json")
          .then((res) => {
              console.log("请求成功:", res);
          })
              .catch((err) => {
              console.log("请求失败:", err);
          })
    
  	// ....

• 因为返回的都是 Promise 的，所以可以使用 "async/await" 时代码更加的简洁

2. EFetch 类: 可通过 new EFetch(instanceConfig) 创建一个新的 efetch 实例

• instanceConfig: 可配置 baseURL 与 interceptors 实例属性，给 efetch 实例自定义请求地址前缀或通过请求拦截器中添加统一添加 token 信息等操作 tip: 目前 instanceConfig 暂时只可以配置该两个属性，后续的扩展留意版本更新

• // 示例
  import efetch, { EFetch } from "efetch-api" // -- 导入 EFetch 类
    
  // -- 创建 efetch 实例: 因为每 new EFetch 都是一个独立的实例，所以也可以在项目中创建多个实例来管理不同的服务器请求...
  const efetch = new EFetch({
      baseURL: "http://47.121.143.202:3000", // -- 配置实例请求地址前缀
    
      interceptors: { // -- 配置拦截器: 目前仅支持 request 与 response
          request: (config) => {
              console.log("触发请求拦截器") // -- 可以在该拦截器中进行 token 的携带，设置显示 loading 效果等
              return config
          },
          response: (res) => {
              console.log("触发响应拦截器") // -- 可以在该拦截器中进行设置取消显示 loading 等
              return res
          }
      }
  })
    
  // -- 请求发送示例
  (async () => {
      // -- 因为该 efetch 实例在创建时请求地址定义了默认前缀，所以发送请求只需传入前缀后面的路由地址即可（"/banner"） 
      const reslut = await efetch.get("/banner", { 
          params: {
              type_id: 0
          }
      }, "json")
    
      console.log("请求结果:", reslut);
        
      // 其它请求同理 --> 略
  })();