现在流行的 Ajax 库，都是基于 Promise 实现的，如：axios。所以基于 Promise 封装一个简单的 Ajax 库，来理解其原理。

参数设置

options: [Object]

  • type: [String] 请求方式，默认 get

  • url: [String] 请求地址

  • data: [Object] 发送的数据

  • dataType: [String] 数据类型，json/xml/text，默认 json

  • cache: [Boolean] 是否缓存，默认不缓存

默认都是异步操作，不支持同步

整体结构

使用一个闭包封装，然后通过挂载到 window 来使用，借用了 JQuery 的思想

  1. ;(function(window) {
  2.   function ajaxPromise(options) {
  3.     //...
  4.   }
  5.   window.ajax = ajaxPromise;
  6. })(window)

构造函数

由于这个方法基于 Promise 来管理 Ajax 操作，所以，构造函数必定返回一个 Promise 实例。

在这个 Promise 实例中的回调函数中执行 Ajax 操作，把参数的处理，放到外面。

  1. function ajaxPromise(opts) {
  3.   //=> 处理各种参数
  5.   return new Promise(function (resolve, reject) {
  6.     //=> 这里执行原生 Ajax
  7.     let xhr = new XMLHttpRequest();
  8.     xhr.open(type, url); // 默认异步
  9.     xhr.onreadystatechange = function () {
  10.       if (xhr.readyState === 4 && /^2\d{2}|304/.test(xhr.status)) {
  11.         //=> 成功
  12.         // 处理数据类型
  13.         //...
  14.         resolve(data);
  15.       }
  17.       if (xhr.readyState === 4 && /^[45]\d{2}/.test(xhr.status)) {
  18.         //=> 失败
  19.         reject(xhr);
  20.       }
  21.     };
  22.     //=> 设置请求头，使得后台接受的参数是 form data，而不是字符串
  23.     xhr.setRequestHeader('content-type', 'application/x-www-form-urlencoded;charset=utf-8');
  24.     xhr.send(data);
  25.   })
  26. }

参数的处理与前面封装的 Ajax 库一样，这里不再赘述。

这里只需要简单的在 Ajax 请求成功后，执行 resolve，失败后执行 reject 即可。

代码

  1. ; (function (window) {
  3.   function ajaxPromise(opts) {
  4.     let {
  5.       url,
  6.       type = 'get',
  7.       data = {},
  8.       dataType = 'json',
  9.       cache = false
  10.     } = opts;
  12.     //=> 处理 data
  13.     if (typeof data === 'object') {
  14.       let str = '';
  15.       for (let k in data) {
  16.         if (data.hasOwnProperty(k)) {
  17.           str += `${k}=${data[k]}&`;
  18.         }
  19.       }
  20.       data = str.slice(0, str.length - 1);
  21.     }
  23.     // 判断是否是 get 类型请求
  24.     if (/^(GET|DELETE|HEAD|TRACE|OPTIONS)$/i.test(type)) {
  25.       let char = '';
  26.       if (url.indexOf('?') === -1) {
  27.         char = `?`;
  28.       } else {
  29.         url = url.replace(/&$/, '');
  30.         char = `&`;
  31.       }
  32.       url += `${char}${data}`;
  33.       data = null;
  34.     }
  36.     //=> 处理 cache
  37.     if (/^GET$/i.test(type) && cache === false) {
  38.       //=> url 末尾追加时间戳
  39.       let char = '';
  40.       if (url.indexOf('?') === -1) {
  41.         char = `?`;
  42.       } else {
  43.         url = url.replace(/&$/, '');
  44.         char = `&`;
  45.       }
  46.       url += `${char}_=${+(new Date())}`;
  47.       this.url = url;
  48.     }
  51.     return new Promise(function (resolve, reject) {
  52.       //=> 这里执行原生 Ajax
  53.       let xhr = new XMLHttpRequest();
  54.       xhr.open(type, url); // 默认异步
  55.       xhr.onreadystatechange = function () {
  56.         if (xhr.readyState === 4 && /^2\d{2}|304/.test(xhr.status)) {
  57.           //=> 成功
  58.           // 处理数据类型
  59.           let data = xhr.responseText;
  60.           switch (dataType.toLowerCase()) {
  61.             case 'json':
  62.               data = JSON.parse(data);
  63.               break;
  64.             case 'xml':
  65.               data = xhr.responseXML;
  66.             case 'text':
  67.               break;
  68.             default:
  69.           }
  70.           resolve(data);
  71.         }
  73.         if (xhr.readyState === 4 && /^[45]\d{2}/.test(xhr.status)) {
  74.           //=> 失败
  75.           reject(xhr);
  76.         }
  77.       };
  78.       //=> 设置请求头，使得后台接受的参数是 form data，而不是字符串
  79.       xhr.setRequestHeader('content-type', 'application/x-www-form-urlencoded;charset=utf-8');
  80.       xhr.send(data);
  81.     })
  82.   }
  84.   window.ajaxPromise = ajaxPromise;
  85. }) (window);