1. /* 
    2.  * 对Fetch的封装：让其支持params/请求主体的格式化/请求地址的公共前缀 
    3.  */
    4. /* const env = process.env.NODE_ENV || 'development',
    5.     baseURL = '';
    6. switch (env) {
    7.     case 'development':
    8.         baseURL = 'http://127.0.0.1:9999';
    9.         break;
    10.     case 'test':
    11.         baseURL = 'http://168.1.123.1:9999';
    12.         break;
    13.     case 'production':
    14.         baseURL = 'http://api.zhufengpeixun.cn';
    15.         break;
    16. } */
    18. // 公用前缀 & 默认配置
    19. let baseURL = 'http://127.0.0.1:9999',
    20.     inital = {
    21.         method: 'GET',
    22.         params: null,
    23.         body: null,
    24.         headers: {
    25.             'Content-Type': 'application/x-www-form-urlencoded'
    26.         },
    27.         credentials: true,
    28.         responseType: 'JSON',
    29.         cache: 'no-cache'
    30.     };
    32. // 校验是否为纯粹的对象
    33. const isPlainObject = function isPlainObject(obj) {
    34.     var proto, Ctor;
    35.     if (!obj || typeof obj !== "object") return false;
    36.     proto = Object.getPrototypeOf(obj);
    37.     if (!proto) return true;
    38.     Ctor = proto.hasOwnProperty('constructor') && proto.constructor;
    39.     return typeof Ctor === "function" && Ctor === Object;
    40. };
    42. // 发送数据请求
    43. const request = function request(url, config) {
    44.     // 合并配置项{不要去更改inital中的内容}
    45.     (config == null || typeof config !== "object") ? config = {}: null;
    46.     if (config.headers && isPlainObject(config.headers)) {
    47.         // 单独的给HEADERS进行深度合并
    48.         config.headers = Object.assign({}, inital.headers, config.headers);
    49.     }
    50.     let {
    51.         method,
    52.         params,
    53.         body,
    54.         headers,
    55.         credentials,
    56.         responseType,
    57.         cache
    58.     } = Object.assign({}, inital, config);
    60.     // 处理URL{格式校验 & 公共前缀 & 拼接params中的信息到URL的末尾}
    61.     if (typeof url !== "string") throw new TypeError(`${url} is not an string!`);
    62.     if (!/^http(s?):\/\//i.test(url)) url = baseURL + url;
    63.     if (params != null) {
    64.         if (isPlainObject(params)) {
    65.             params = Qs.stringify(params);
    66.         }
    67.         url += `${url.includes('?')?'&':'?'}${params}`;
    68.     }
    70.     // 处理请求主体的数据格式{根据headers中的Content-Type处理成为指定的格式}
    71.     if (body != null) {
    72.         if (isPlainObject(body)) {
    73.             let contentType = headers['Content-Type'] || 'application/json';
    74.             if (contentType.includes('urlencoded')) body = Qs.stringify(body);
    75.             if (contentType.includes('json')) body = JSON.stringify(body);
    76.         }
    77.     }
    79.     // 处理credentials{如果传递的是true,我们让其为include,否则是same-origin}
    80.     credentials = credentials ? 'include' : 'same-origin';
    82.     // 基于fetch请求数据
    83.     method = method.toUpperCase();
    84.     responseType = responseType.toUpperCase();
    85.     config = {
    86.         method,
    87.         credentials,
    88.         cache,
    89.         headers
    90.     };
    91.     /^(POST|PUT|PATCH)$/i.test(method) ? config.body = body : null;
    92.     return fetch(url, config).then(function onfulfilled(response) {
    93.         // 不一定是成功的：Fetch的特点的是，只要服务器有返回结果，不论状态码是多少，它都认为是成功
    94.         let {
    95.             status,
    96.             statusText
    97.         } = response;
    98.         if (status >= 200 && status < 400) {
    99.             // 真正成功获取数据
    100.             let result;
    101.             switch (responseType) {
    102.                 case 'TEXT':
    103.                     result = response.text();
    104.                     break;
    105.                 case 'JSON':
    106.                     result = response.json();
    107.                     break;
    108.                 case 'BLOB':
    109.                     result = response.blob();
    110.                     break;
    111.                 case 'ARRAYBUFFER':
    112.                     result = response.arrayBuffer();
    113.                     break;
    114.             }
    115.             return result;
    116.         }
    117.         // 应该是失败的处理
    118.         return Promise.reject({
    119.             code: 'STATUS ERROR',
    120.             status,
    121.             statusText
    122.         });
    123.     }).catch(function onrejected(reason) {
    124.         // @1:状态码失败
    125.         if (reason && reason.code === "STATUS ERROR") {
    126.             switch (reason.status) {
    127.                 case 401:
    128.                     break;
    129.                     // ...
    130.             }
    131.         }
    133.         // @2:断网
    134.         if (!navigator.onLine) {
    135.             // ...
    136.         }
    138.         // @3:处理返回数据格式失败
    139.         // ...
    141.         return Promise.reject(reason);
    142.     });
    143. };
    144. export default request;

    使用：

    1. request("http://ww.xx.xx.com/asimov/subscriptions/recommended_collections")
    2.   .then((response) => response.json())
    3.   .then((data) => {
    4.   console.log(data);
    5. });