fetch知识点汇总

使用XHR发送一个json请求一般是这样:

 const xhr = new XMLHttpRequest()
 xhr.open('Get', url)
 xhr.responseType = 'json'

 xhr.onload = () => {
     console.log(xhr.response)
 }

 xhr.onerror = () => {
     console.log('error')
 }

 xhr.send()

使用fetch的实例:

 fetch(url).then(response => response.json())
     .then(data => console.log(data))
     .catch(e => console.log('error', e))

Fetch参数

fetch(input [,init])

input(必须) 定义要获取的资源(请求地址)

init(可选)

参数 | 描述

method   请求使用的方法，如GET、POST

headers   http请求头（user-Agent, Cookie）

body   请求的body信息

mode

fetch可以设置不同的模式使得请求有效. 模式可在fetch方法的第二个参数对象中定义.

可定义的模式如下:

• same-origin: 表示同域下可请求成功; 反之, 浏览器将拒绝发送本次fetch, 同时抛出错误 “TypeError: Failed to fetch(…)”.
• cors: 表示同域和带有CORS响应头的跨域下可请求成功. 其他请求将被拒绝.
• cors-with-forced-preflight: 表示在发出请求前, 将执行preflight检查.
• no-cors: 常用于跨域请求不带CORS响应头场景, 此时响应类型为 “opaque”.

除此之外, 还有两种不太常用的mode类型, 分别是 navigate , websocket , 它们是 HTML标准 中特殊的值, 这里不做详细介绍.

credentials

　omit（缺省值，默认为该值）、same-origin（同源，便是同域请求才发送cookie）、include（任何请求都带cookie）

cache

• default(表示fetch请求之前将检查下http的缓存)
• no-store（表示fetch请求将完全忽略http缓存的存在，这意味着请求之前将不再检查下http的缓存, 拿到响应后, 它也不会更新http缓存）
• no-cache（如果存在缓存,那么fetch将发送一个条件查询request和一个正常的request, 拿到响应后,它会更新http缓存）
• reload（表示fetch请求之前将忽略http缓存的存在, 但是请求拿到响应后,它将主动更新http缓存）
• force-cache（表示fetch请求不顾一切的依赖缓存, 即使缓存过期了,它依然从缓存中读取. 除非没有任何缓存, 那么它将发送一个正常的request）
• only-if-cached（表示fetch请求不顾一切的依赖缓存, 即使缓存过期了,它依然从缓存中读取. 如果没有缓存, 它将抛出网络错误(该设置只在mode为”same-origin”时有效).

如果fetch请求的header里包含 If-Modified-Since, If-None-Match, If-Unmodified-Since, If-Match, 或者 If-Range 之一, 且cache的值为 default , 那么fetch将自动把 cache的值设置为 "no-store"

 Fetch - response type

一个fetch请求的相应类型（response.type）为如下三种之一：

• baisc (同域下，相应类型为basic)
• cors (同样是跨域下, 如果服务器返回了CORS响应头, 那么响应类型将为 “cors”. 此时响应头中除 Cache-Control , Content-Language , Content-Type , Expores , Last-Modified 和 Progma 之外的字段都不可见.)
• opaque ( 跨域下, 服务器没有返回CORS响应头, 响应类型为 “opaque”. 此时我们几乎不能查看任何有价值的信息, 比如不能查看response, status, url等等等等.)

注意: 无论是同域还是跨域, 以上 fetch 请求都到达了服务器.

 Fetch 常见坑

　　1.Fetch 请求默认是不带 cookie 的，需要设置 fetch(url, {credentials: 'include'})

　　　　默认情况下, fetch 不会从服务端发送或接收任何 cookies, 如果站点依赖于维护一个用户会话，则导致未经认证的请求(要发送 cookies，必须发送凭据头)

　　2.服务器返回 400，500 错误码时并不会 reject，只有网络错误这些导致请求不能完成时，fetch 才会被 reject。

　　　　当接收到一个代表错误的 HTTP 状态码时，从 fetch()返回的 Promise 不会被标记为 reject， 即使该 HTTP 响应的状态码是 404 或 500。相反，它会将 Promise 状态标记为 resolve （但是会将 reolve 的返回值的 ok 属性设置为 false， 想要精确判断fetch（）是否成功，需要包含 promise resolved 的情况，此时再判断 Response.ok 是不是为 true。HTTP状态码为200-299是才会设置为true）， 仅当网络故障时或请求被阻止时，才会标记为 rejec

使用Fetch封装request方法

http.js

 import 'whatwg-fetch';

 const netErrorStatu = 1;    // 网络错误
 const serverErrorStatu = 2;    // 服务器错误
 const formatErrorStatu = 3;    // 数据格式错误
 const logicErrorStatu = 4;    // 业务逻辑错误

 const errorMsg = {
     [netErrorStatu]: '网络错误',
     [serverErrorStatu]: '服务器错误',
     [formatErrorStatu]: '数据格式错误',
     [logicErrorStatu]: '业务逻辑错误'
 };

 class CustomFetchError {
     constructor(errno, data) {
         this.errno = errno;
         this.msg = errorMsg[errno];
         this.data = data;
     }
 }

 export function buildQuery(data) {
     const toString = Object.prototype.toString;

     const res = Object.entries(data).reduce((pre, [key, value]) => {
         let newValue;

         if (Array.isArray(value) || toString.call(value) === '[object Object]') {
             newValue = JSON.stringify(value);
         } else {
             newValue = (value === null || value === undefined) ? '' : value;
         }

         pre.push(`${key}=${encodeURIComponent(newValue)}`);

         return pre;
     }, []);

     return res.join('&');
 }

 export async function request(input, opt) {
     // 设置请求默认带cookie
     const init = Object.assign({
         credentials: 'include'
     }, opt);

     let res;
     // 仅当网络故障时或请求被阻止时，才会标记为 rejec
     try {
         res = await fetch(input, init);
     } catch (e) {
         throw new CustomFetchError(netErrorStatu, e);
     }
     // 仅HTTP状态码为200-299是才会设置为true
     if (!res.ok) {
         throw new CustomFetchError(serverErrorStatu, res);
     }

     let data;
     // fetch()请求返回的response是Stream对象，调用response.json时由于异步读取流对象所以返回的是一个Promise对象
     try {
         data = await res.json();
     } catch (e) {
         throw new CustomFetchError(formatErrorStatu, e);
     }
     // 根据和后台的约定设置的错误处理
     if (!data || data.errno !== 0) {
         throw new CustomFetchError(logicErrorStatu, data);
     }

     return data.data;
 }

 export function get(url, params = {}, opt = {}) {
     const init = Object.assign({
         method: 'GET'
     }, opt);

     // ajax cache
     Object.assign(params, {
         timestamp: new Date().getTime()
     });

     const paramsStr = buildQuery(params);

     const urlWithQuery = url + (paramsStr ? `?${paramsStr}` : '');

     return request(urlWithQuery, init);
 }

 export function post(url, params = {}, opt = {}) {
     const headers = {
         'Content-Type': 'application/x-www-form-urlencoded'
     };

     const init = Object.assign({
         method: 'POST',
         body: buildQuery(params),
         headers
     }, opt);

     return request(url, init);
 }

 export default {
     request,
     get,
     post
 };

requset.js

 import { notification } from 'antd';
 import Loading from 'components/Loading';
 import { LOGIN_URL } from 'constants/basic';
 import * as http from './http';

 const loading = Loading.newInstance();

 async function request(method, url, params, opt = {}, httpOpt) {
     /**
      * needLoading 是否添加loading图片
      * checkAccount 验证未登陆是否跳登陆页面
      * showErrorMsg 是都显示通用错误提示
      */
     const {
         needLoading = true,
         checkAccount = true,
         showErrorMsg = true
     } = opt;

     if (needLoading) {
         loading.add();
     }

     let res;

     try {
         res = await http[method](url, params, httpOpt);
     } catch (e) {
         if (checkAccount && e.errno === 4 && e.data.errno === 10000) {
             location.href = LOGIN_URL;
         }

         if (showErrorMsg) {
             notification.error({
                 message: '提示信息',
                 description: e.errno === 4 ? e.data.msg : e.msg
             });
         }

         throw e;
     } finally {
         if (needLoading) {
             loading.remove();
         }
     }

     return res;
 }

 export function get(...arg) {
     return request('get', ...arg);
 }

 export function post(...arg) {
     return request('post', ...arg);
 }

　　github的代码地址: https://github.com/haozhaohang/library