记一次fetch简单封装_fetch 400

记一次fetch简单封装

刚进公司没多久，师父分配了一个简单任务，是做一个产品的官网，以静态页面为主，所有涉及到的接口大概只有5、6个。开始做之前还是考虑到了设计模式、代码风格啥的，结果开始写之后害怕在上线之前不能搞定，所以就想着先做一个出来。当然也可能是我太菜，最后终于是做出来上线了。但是有一天师父在审我代码的时候说我发请求fetch没有封装，以后很不好维护，让我有时间重构一下。这算是给我布置家庭作业了吧……

网上封装fetch代码一搜一大把，我主要是参考的我师父以前的代码，话不多说看代码吧！

1. 首先是封装fetch请求处理：

//api/request.js
//检查请求返回状态码并进行处理
const codeMessage = {
  200: "服务器成功返回请求的数据。",
  201: "新建或修改数据成功。",
  202: "一个请求已经进入后台排队（异步任务）。",
  204: "删除数据成功。",
  400: "发出的请求有错误，服务器没有进行新建或修改数据的操作。",
  401: "用户没有权限（令牌、用户名、密码错误）。",
  403: "用户得到授权，但是访问是被禁止的。",
  404: "发出的请求针对的是不存在的记录，服务器没有进行操作。",
  406: "请求的格式不可得。",
  410: "请求的资源被永久删除，且不会再得到的。",
  422: "当创建一个对象时，发生一个验证错误。",
  500: "服务器发生错误，请检查服务器。",
  502: "网关错误。",
  503: "服务不可用&#x