fetch

起步

1 概念 -> Dva 内部的一个异步请求库 (不推介使用)   // 也叫网络请求库 / 数据请求库

2 request.js

  import { fetch } from 'dva'
  import fetch from 'dva/fetch'

Dva 项目中的 -> 基础配置文件

// 就是返回一个被解析为 JSON格式的 promise对象
function parseJSON(response) {
  return response.json()   // json() -> 接收一个 Response 流, 读取完成返回一个 Promise
}


// 检查请求状态的封装
function checkStatus(response) {
  if (response.status >= 200 && response.status < 300) {
    return response;   // 如果接通服务器, 直接返回
  }

  // 不用动
  const error = new Error(response.statusText);
  error.response = response;
  throw error;
}

// 注释不用管
/**
 * Requests a URL, returning a promise.
 *
 * @param  {string} url       The URL we want to request
 * @param  {object} [options] The options we want to pass to "fetch"
 * @return {object}           An object containing either "data" or "err"
*/


export default function request(url, options) {
  return fetch(url, options)
    .then(checkStatus)
    .then(parseJSON)
    .then(data => ({ data }))
    .catch(err => ({ err }));
}

"然后去配置 services 路径就可以用这个了"

升级版的配置文件

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


// -------------------------- 检查请求状态的封装 -----------------------
const checkStatus = response => {
  if (response.status >= 200 && response.status < 400) {
    return response;
  }   // 请求成功, 返回响应数据

  // 获取错误的文字提示 -> codeMessage == 上面的状态码文字定义
  const errortext = codeMessage[response.status] || response.statusText;
  
  notification.error({   // 错误提示信息, notification == antd UI组件
    message: `请求错误 ${response.status}: ${response.url}`,
    description: errortext,
  })   // 请求不成功, 抛出错误提示信息

  // 不用管这个了, 基础模板自带的
  const error = new Error(errortext);
  error.name = response.status;
  error.response = response;
}


// -------------------------- 缓存保存 -----------------------
// 缓存保存 -> 参数 -> 响应数据 + 本地存储的变量名
const cachedSave = (response, hashcode) => {
  
  // get() 方法 - 以字符串的形式从 Headers对象中返回指定 header的全部值
  const contentType = response.headers.get('Content-Type')

  if (contentType && contentType.match(/application\/json/i)) {
    // All data is saved as text -> 所有数据都保存为文本
    // 克隆响应数据并将其, 以字符串的形式, 存储在sessionStorage中
    response
      .clone()
      .text()
      .then(content => {
        sessionStorage.setItem(hashcode, content);
        sessionStorage.setItem(`${hashcode}:timestamp`, Date.now());
      })
  }
  return response;
}


// ----------------------------- 自带的注释, 不用管 ----------------------------
/**
 * Requests a URL, returning a promise.
 *
 * @param  {string} url       The URL we want to request
 * @param  {object} [options] The options we want to pass to "fetch"
 * @return {object}           An object containing either "data" or "err"
*/


// 暂时看不懂了, 看不下去了