/**
 * @description: 基于 XHR 封裝的網(wǎng)絡(luò)請(qǐng)求工具函數(shù)
 * @param {String} url 請(qǐng)求接口地址
 * @param {Document | XMLHttpRequestBodyInit | null} body 請(qǐng)求體
 * @param {Object} requestHeader 請(qǐng)求頭
 * @param {String} method 請(qǐng)求方法
 * @param {String} responseType 設(shè)置響應(yīng)內(nèi)容的解析格式
 * @param {Boolean} async 請(qǐng)求是否異步
 * @param {Number} timeout 設(shè)置請(qǐng)求超時(shí)時(shí)間(單位：毫秒)
 * @param {Boolean} withCredentials 設(shè)置跨域請(qǐng)求是否允許攜帶 cookies 或 Authorization header 等授權(quán)信息
 * @return {Promise} 可包含響應(yīng)內(nèi)容的 Promise 實(shí)例
*/
function request({
  url,
  body = null,
  requestHeader = {'Content-Type': 'application/x-www-form-urlencoded'},
  method = 'GET',
  responseType = 'text',
  async = true,
  timeout = 30000,
  withCredentials = false,
} = {}) {
  return new Promise((resolve, reject) => {
    if (!url) {
      return reject(new TypeError('the required parameter [url] is missing.'));
    }
    if (method.toLowerCase() === 'get' && body) {
      url += `?${request.serialize(body)}`;
      body = null;
    }
    const xhr = new XMLHttpRequest();
    xhr.open(method, url, async);
    if (async) {
      xhr.responseType = responseType;
      xhr.timeout = timeout;
    }
    xhr.withCredentials = withCredentials;
    if (requestHeader && typeof requestHeader === 'object') {
      Object.keys(requestHeader).forEach(key => xhr.setRequestHeader(key, requestHeader[key]));
    }
    xhr.onreadystatechange = function onReadyStateChange() {
      if (xhr.readyState === XMLHttpRequest.DONE) {
        if (xhr.status >= 200 && xhr.status < 300 || xhr.status === 304) {
          resolve(xhr.response);
        }
      }
    };
    xhr.onerror = function onError(error) {
      console.log(error);
      reject({ message: '請(qǐng)求出錯(cuò)，請(qǐng)稍后重試' });
    };
    xhr.ontimeout = function onTimeout() {
      reject({ message: '接口超時(shí)，請(qǐng)稍后重試' });
    };
    xhr.send(body ? JSON.stringify(body) : null);
  });
}

request({
  url: 'http://www.some-domain.com/path/to/example',
  method: 'POST',
  requestHeader: {'Content-Type': 'application/json; charset=UTF-8'},
  body: {key: value}
}).then(response => console.log(response));

// 參考以上示例
function request
  // 省略入?yún)?br>  ...
} = {}) {
  return new Promise((resolve, reject) => {
    // 省略代碼
    ...
  });
}
// 存儲(chǔ)請(qǐng)求接口地址以及請(qǐng)求體和 XHR 實(shí)例的映射關(guān)系
request.cache = {};
/**
 * @description: 根據(jù)提供的鍵名中斷對(duì)應(yīng)的請(qǐng)求  
 * @param {String} key 存儲(chǔ)在 request.cache 屬性中的鍵名，若未提供則中斷全部請(qǐng)求  
 * @return {void}
 */
request.clearCache = (key) => {
  if (key) {
    const instance = request.cache[key];
    if (instance) {
      instance.abort();
      delete request.cache[key];
    }
    return;
  }
  Object.keys(request.cache).forEach(cacheKey => {
    const instance = request.cache[cacheKey];
    instance.abort();
    delete request.cache[cacheKey];
  });
};

/**
 * @description: 將請(qǐng)求體序列化為字符串
 * @param {Document | XMLHttpRequestBodyInit | null} data 請(qǐng)求體
 * @return {String} 序列化后的字符串
 */
request.serialize = (data) => {
  if (data && typeof data === 'object') {
    const result = [];
    Object.keys(data).forEach(key => {
      result.push(`${key}=${JSON.stringify(data[key])}`);
    });
    return result.join('&');
  }
  return data;
}

function request({
  url,
  body = null,
  // 省略部分入?yún)?br>  ...
} = {}) {
  return new Promise((resolve, reject) => {
    if (!url) {
      return reject(new TypeError('the required parameter [url] is missing.'));
    }
    // 省略部分代碼
    ...
    const xhr = new XMLHttpRequest();
    // 將請(qǐng)求接口地址以及請(qǐng)求體和 XHR 實(shí)例存入 cache 中
    let cacheKey = url;
    if (body) {
      cacheKey += `_${request.serialize(body)}`;
    }
    // 每次發(fā)送請(qǐng)求之前將上一個(gè)未完成的相同請(qǐng)求進(jìn)行中斷
    request.cache[cacheKey] && request.clearCache(cacheKey);
    request.cache[cacheKey] = xhr;
    // 省略部分代碼
    ...
    xhr.onreadystatechange = function onReadyStateChange() {
      if (xhr.readyState === XMLHttpRequest.DONE) {
        if (xhr.status >= 200 && xhr.status < 300 || xhr.status === 304) {
          // 請(qǐng)求完成之后清除緩存
          request.clearCache(cacheKey);
          resolve(xhr.response);
        }
      }
    };
    xhr.onerror = function onError(error) {
      console.log(error);
      // 請(qǐng)求報(bào)錯(cuò)之后清除緩存
      request.clearCache(cacheKey);
      reject({ message: '請(qǐng)求出錯(cuò)，請(qǐng)稍后重試' });
    };
    xhr.ontimeout = function onTimeout() {
      // 請(qǐng)求超時(shí)之后清除緩存
      request.clearCache(cacheKey);
      reject({ message: '接口超時(shí)，請(qǐng)稍后重試' });
    };
    xhr.send(body ? JSON.stringify(body) : null);
  });
}

// 網(wǎng)頁卸載前清除緩存
window.addEventListener('beforeunload', () => request.clearCache(), false);
// Vue 中路由跳轉(zhuǎn)前清除緩存
router.beforeEach((to, from, next) => { request.clearCache(); next(); });
// React 中路由跳轉(zhuǎn)時(shí)清除緩存
import { Component } from 'react';
import { withRouter } from 'react-router-dom';
class App extends Component {
  componentDidMount() {
    // 監(jiān)聽路由變化
    this.props.history.listen(location => {
      // 通過比較 location.pathname 來判定路由是否發(fā)生變化
      if (this.props.location.pathname !== location.pathname) {
        // 若路由發(fā)生變化，則清除緩存
        request.clearCache();
      }
    });
  }
}
export default withRouter(App);

// 安裝 axios
npm install --save axios
// 導(dǎo)入 axios
import axios from 'axios';
// 創(chuàng)建 axios 實(shí)例
const instance = axios.create({
  baseURL: 'https://www.some-domain.com/path/to/example',
  timeout: 30000,
  headers: {
    'Content-Type': 'application/x-www-form-urlencoded',
  },
});
// 設(shè)置 axios 實(shí)例默認(rèn)配置
instance.defaults.headers.common['Authorization'] = '';
instance.defaults.headers.post['Content-Type'] = 'application/json; charset=UTF-8';
// 自定義請(qǐng)求攔截器
instance.interceptors.request.use(config => {
  const token = window.localStorage.getItem('token');
  token && (config.headers['Authorization'] = token);
  return config;
}, error => Promise.reject(error));
// 自定義響應(yīng)攔截器
instance.interceptors.response.use(response => {
  if (response.status === 200) {
    return Promise.resolve(response.data);
  }
  return Promise.reject(response);
}, error => Promise.reject(error));

const CancelToken = axios.CancelToken;
let cancel;
instance.post('/api/user/123', {
  name: 'new name',
  phone: 'new phone',
}, {
  // CancelToken 構(gòu)造函數(shù)接收一個(gè) executor 函數(shù)參數(shù)，并且該函數(shù)接收一個(gè)取消函數(shù) c 用于取消該次請(qǐng)求
  cancelToken: new CancelToken(function executor(c) {
    // 將取消函數(shù)賦值到外部變量，方便從外部取消請(qǐng)求
    cancel = c;
  }),
});
// 手動(dòng)取消請(qǐng)求
cancel();

// cacheUtils.js
export const CacheUtils = {
  // 存儲(chǔ)請(qǐng)求接口地址以及請(qǐng)求體和取消函數(shù)之間的映射關(guān)系
  cache: {},
  // 根據(jù)提供的鍵名 key 取消對(duì)應(yīng)的請(qǐng)求，若未提供則取消全部請(qǐng)求
  clearCache: function (key) {
    if (key) {
      const cancel = this.cache[key];
      if (cancel && typeof cancel === 'function') {
        cancel();
        delete this.cache[key];
      }
      return;
    }
    Object.keys(this.cache).forEach(cacheKey => {
      const cancel = this.cache[cacheKey];
      cancel();
      delete this.cache[cacheKey];
    });
  },
};

import qs from 'qs';
import { CacheUtils } from './cacheUtils.js';
// 自定義請(qǐng)求攔截器
instance.interceptors.request.use(config => {
  let cacheKey = config.url;
  const token = window.localStorage.getItem('token');
  token && (config.headers['Authorization'] = token);
  const method = config.method.toLowerCase();
  if (method === 'get' && config.params && typeof config.params === 'object') {
    cacheKey += qs.stringify(config.params, { addQueryPrefix: true });
  }
  if (['post', 'put', 'patch'].includes(method) && config.data && typeof config.data === 'object') {
    config.data = qs.stringify(config.data);
    cacheKey += `_${qs.stringify(config.data, { arrayFormat: 'brackets' })}`;
  }
  // 每次發(fā)送請(qǐng)求之前將上一個(gè)未完成的相同請(qǐng)求進(jìn)行中斷
  CacheUtils.cache[cacheKey] && CacheUtils.clearCache(cacheKey);
  // 將當(dāng)前請(qǐng)求所對(duì)應(yīng)的取消函數(shù)存入緩存
  config.cancelToken = new axios.CancelToken(function executor(c) {
    CacheUtils.cache[cacheKey] = c;
  });
  // 臨時(shí)保存 cacheKey，用于在響應(yīng)攔截器中清除緩存
  config.cacheKey = cacheKey;
  return config;
}, error => Promise.reject(error));
// 自定義響應(yīng)攔截器
instance.interceptors.response.use(response => {
  // 響應(yīng)接收之后清除緩存
  const cacheKey = response.config.cacheKey;
  delete CacheUtils.cache[cacheKey];
  if (response.status === 200) {
    return Promise.resolve(response.data);
  }
  return Promise.reject(response);
}, error => {
  // 響應(yīng)異常清除緩存
  if (error.config) {
    const cacheKey = error.config.cacheKey;
    delete CacheUtils.cache[cacheKey];
  }
  return Promise.reject(error);
});

// 安裝依賴
npm install --save whatwg-fetch
// 引入依賴
import {fetch as fetchPolyfill} from 'whatwg-fetch';

const url = 'http://www.some-domain.com/path/to/example';
const initData = {
  method: 'POST',
  body: JSON.stringify({key: value}),
  headers: {
    'Content-Type': 'application/json; charset=UTF-8',
  },
  cache: 'no-cache',
  credentials: 'same-origin',
  mode: 'cors',
  redirect: 'follow',
  referrer: 'no-referrer',
};
fetch(url, initData).then(response => response.json()).then(data => console.log(data));
// 也可以直接通過 Request 構(gòu)造函數(shù)來初始化請(qǐng)求數(shù)據(jù)
// Request 構(gòu)造函數(shù)接收兩個(gè)參數(shù)
// 第一個(gè)參數(shù)表示需要獲取的資源 URL 路徑或者另一個(gè)嵌套的 Request 實(shí)例
// 第二個(gè)可選參數(shù)表示需要被包含到請(qǐng)求中的各種自定義選項(xiàng)
const request = new Request(url, initData);
fetch(request).then(response => response.json()).then(data => console.log(data));

const abortableFetch = (url, initData) => {
  // 實(shí)例化控制器對(duì)象
  const abortController = new AbortController();
  // 獲取信號(hào)對(duì)象
  const signal = abortController.signal;
  return {
    // 注意這里需要將 signal 信號(hào)對(duì)象與請(qǐng)求進(jìn)行關(guān)聯(lián)，關(guān)聯(lián)之后才能通過 abortController.abort 方法取消請(qǐng)求
    ready: fetch(url, {...initData, signal}).then(response => response.json()),
    // 暴露 cancel 方法，用于在外層手動(dòng)取消請(qǐng)求
    cancel: () => abortController.abort(),
  };
};