1. /*
    2.  * 基于Promise封装一个ajax库
    3.  *   + 参考axios的语法
    4.  *   + XMLHttpRequest
    5.  *
    6.  * 基于语法：
    7.  * ajax([config])
    8.  * ajax.get/head/options/delete([url],[config])
    9.  * ajax.post/put([url],[data],[config])
    10.  *
    11.  * 二次配置：
    12.  *   + 默认配置项
    13.  *   + ajax.defaults.xxx 修改默认配置项
    14.  *   + ajax([config]) 自己传递的配置项
    15.  *
    16.  * {
    17.  *    baseURL:'',
    18.  *    url:'',
    19.  *    method:'get',
    20.  *    transformRequest:function(data){return data;},  请求主体传递信息的格式化
    21.  *    headers:{
    22.  *       'Content-Type':'application/json'
    23.  *    },
    24.  *    params:{},  URL传参数信息（拼接到URL的末尾）
    25.  *    cache:true, GET系列请求中是否清除缓存（?_=随机数）
    26.  *    data:{}, 请求主体传参信息
    27.  *    timeout:0, 设置请求超时时间
    28.  *    withCredentials:false, 跨域请求中允许携带资源凭证
    29.  *    responseType:'json',  预设服务器返回结果的处理方案 'stream', 'document', 'json', 'text'
    30.  *    validateStatus: function (status) {
    31.  *       return status >= 200 && status < 300; // default
    32.  *    }
    33.  * }
    34.  *
    35.  * 拦截器：
    36.  *   + 请求拦截器  ajax.interceptors.request(function(config){})
    37.  *   + 响应拦截器  ajax.interceptors.response(function(response){},function(reason){})
    38.  *   + ajax.all([promise array])
    39.  *
    40.  * 基于ajax请求回来的结果都是promise实例
    41.  *   + response
    42.  *     + data  响应主体信息
    43.  *     + status 状态码
    44.  *     + statusText 状态码的描述
    45.  *     + headers 响应头信息
    46.  *     + request XHR原生对象
    47.  *   + reason
    48.  *     + response
    49.  *     + message
    50.  *     + ...
    51.  */
    52. (function () {
    53.     // 核心库的封装
    54.     function ajax(config = {}) {
    55.         return new init(config);
    56.     }
    57.     ajax.prototype = {
    58.         constructor: ajax,
    59.         version: "0.0.1",
    60.         // 发送ajax请求
    61.         send() {
    62.             let {
    63.                 method,
    64.                 timeout,
    65.                 withCredentials,
    66.                 headers,
    67.                 validateStatus,
    68.                 adapter2,
    69.             } = this.config;
    71.             return new Promise((resolve, reject) => {
    72.                 let xhr = new XMLHttpRequest();
    73.                 xhr.open(method, this.initURL());
    75.                 // 基础配置
    76.                 xhr.timeout = timeout;
    77.                 xhr.withCredentials = withCredentials;
    78.                 Object.keys(headers).forEach(key => {
    79.                     xhr.setRequestHeader(key, headers[key]);
    80.                 });
    82.                 xhr.onreadystatechange = () => {
    83.                     let status = xhr.status,
    84.                         state = xhr.readyState;
    85.                     if (!validateStatus(status)) {
    86.                         // 状态码代表失败(有请求结果)
    87.                         reject(this.initResult(false, xhr));
    88.                         return;
    89.                     }
    90.                     // 成功
    91.                     if (state === 4) {
    92.                         resolve(this.initResult(true, xhr));
    93.                     }
    94.                 };
    96.                 xhr.onerror = err => {
    97.                     // 请求都是失败的
    98.                     reject({
    99.                         message: err.message,
    100.                     });
    101.                 };
    103.                 xhr.send(this.initData());
    104.             }).then(
    105.                 // 响应拦截器：在返回的promise实例和自己调用then中拦截一道
    106.                 ...adapter2
    107.             );
    108.         },
    109.         // 初始化URL
    110.         initURL() {
    111.             let { url, baseURL, params, cache } = this.config;
    112.             url = baseURL + url;
    113.             // 问号参数
    114.             params = ajax.stringify(params);
    115.             if (params) {
    116.                 url += `${url.includes("?") ? "&" : "?"}${params}`;
    117.             }
    118.             // 缓存处理
    119.             if (!cache) {
    120.                 url += `${url.includes("?") ? "&" : "?"}_=${+new Date()}`;
    121.             }
    122.             return url;
    123.         },
    124.         // 请求主体信息处理 (只对POST有效)
    125.         initData() {
    126.             let { method, data, transformRequest } = this.config;
    127.             if (this.GET_REG.test(method)) return null;
    128.             return transformRequest(data);
    129.         },
    130.         // 构建成功失败的返回结果
    131.         getHeaders(xhr) {
    132.             let headersText = xhr.getAllResponseHeaders(),
    133.                 obj = {};
    134.             headersText = headersText.split(/(?:\n)/g);
    135.             headersText.forEach(item => {
    136.                 if (!item) return;
    137.                 let [key, value] = item.split(": ");
    138.                 obj[key] = value;
    139.             });
    140.             return obj;
    141.         },
    142.         initResult(flag, xhr) {
    143.             let { responseType } = this.config;
    145.             let response = {
    146.                 data: {},
    147.                 request: xhr,
    148.                 status: xhr.status,
    149.                 statusText: xhr.statusText,
    150.                 headers: this.getHeaders(xhr),
    151.             };
    153.             if (flag) {
    154.                 // 成功
    155.                 let res = xhr.responseText;
    156.                 switch (responseType.toLowerCase()) {
    157.                     case "json":
    158.                         res = JSON.parse(res);
    159.                         break;
    160.                     case "document":
    161.                         res = xhr.responseXML;
    162.                         break;
    163.                     case "stream":
    164.                         res = xhr.response;
    165.                         break;
    166.                 }
    167.                 response.data = res;
    168.                 return response;
    169.             }
    171.             // 失败
    172.             return {
    173.                 response,
    174.                 message: xhr.statusText,
    175.             };
    176.         },
    177.     };
    179.     function init(config) {
    180.         // 自己传递的配置项替换默认配置项
    181.         Object.keys(config).forEach(key => {
    182.             ajax.defaults[key] = config[key];
    183.         });
    185.         // 请求拦截器：处理config
    186.         defaults = defaults.adapter1[0](defaults);
    188.         // 把配置项挂在到实例上
    189.         this.config = defaults;
    190.         this.GET_REG = /^(GET|HEAD|DELETE|OPTIONS)$/i;
    192.         // 发送请求，但是最后返回的是一个promise实例
    193.         return this.send();
    194.     }
    195.     init.prototype = ajax.prototype;
    197.     // 默认配置项（基于Proxy劫持数据，控制只允许ajax.defaults.xxx=xxx来修改配置项）
    198.     let defaultsType = {
    199.         baseURL: "string",
    200.         url: "string",
    201.         method: "string",
    202.         params: "object",
    203.         cache: "boolean",
    204.         data: "object",
    205.         timeout: "number",
    206.         withCredentials: "boolean",
    207.         responseType: "string",
    208.         headers: "object",
    209.         transformRequest: "function",
    210.         validateStatus: "function",
    211.         adapter1: "array",
    212.         adapter2: "array",
    213.     };
    214.     let defaults = {
    215.         baseURL: "",
    216.         url: "",
    217.         method: "get",
    218.         params: {},
    219.         cache: true,
    220.         data: {},
    221.         timeout: 0,
    222.         withCredentials: false,
    223.         responseType: "json",
    224.         headers: {
    225.             "Content-Type": "application/json",
    226.         },
    227.         transformRequest: data => JSON.stringify(data),
    228.         validateStatus: status => status >= 200 && status < 300,
    229.         // 拦截器参数 请求/响应
    230.         adapter1: [
    231.             function (config) {
    232.                 return config;
    233.             },
    234.         ],
    235.         adapter2: [
    236.             function (response) {
    237.                 return Promise.resolve(response);
    238.             },
    239.             function (reason) {
    240.                 return Promise.reject(reason);
    241.             },
    242.         ],
    243.     };
    244.     ajax.defaults = new Proxy(defaults, {
    245.         set(obj, prop, value) {
    246.             // 拦截器不走这个配置
    247.             if (prop === "adapter1" || prop === "adapter2") {
    248.                 return;
    249.             }
    250.             // 格式是否合法的处理
    251.             let defT = defaultsType[prop] || "string",
    252.                 valT = value === null ? "null" : typeof value;
    253.             if (defT !== valT) {
    254.                 throw new TypeError(`传参格式错误：${prop}参数的格式必须是${defT}！`);
    255.             }
    256.             // 和之前的HEADERS信息合并后再处理
    257.             if (prop === "headers") {
    258.                 value = Object.assign(defaults.headers, value);
    259.             }
    260.             obj[prop] = value;
    261.         },
    262.     });
    264.     // 拦截器的处理
    265.     ajax.interceptors = {
    266.         request(callback) {
    267.             if (typeof callback !== "function") {
    268.                 throw new TypeError(`传参格式错误：实参的格式必须是函数！`);
    269.             }
    270.             defaults.adapter1 = [callback];
    271.         },
    272.         response(success, error) {
    273.             // null和undefined不管，其余的处理
    274.             if (success != undefined) {
    275.                 if (typeof success !== "function") {
    276.                     throw new TypeError(`传参格式错误：实参的格式必须是函数！`);
    277.                 }
    278.                 defaults.adapter2[0] = success;
    279.             }
    280.             if (error != undefined) {
    281.                 if (typeof error !== "function") {
    282.                     throw new TypeError(`传参格式错误：实参的格式必须是函数！`);
    283.                 }
    284.                 defaults.adapter2[1] = error;
    285.             }
    286.         },
    287.     };
    289.     // 快捷调用的办法（最后本质回归总方法ajax，只不过提前知道了一些配置项而已）
    290.     ["get", "head", "delete", "options"].forEach(name => {
    291.         ajax[name] = function (url, config = {}) {
    292.             config = {
    293.                 url,
    294.                 method: name,
    295.                 ...config,
    296.             };
    297.             return ajax(config);
    298.         };
    299.     });
    300.     ["post", "put"].forEach(name => {
    301.         ajax[name] = function (url, data = {}, config = {}) {
    302.             config = {
    303.                 url,
    304.                 method: name,
    305.                 data,
    306.                 ...config,
    307.             };
    308.             return ajax(config);
    309.         };
    310.     });
    311.     ajax["all"] = function (arr = []) {
    312.         return Promise.all(arr);
    313.     };
    314.     ajax["stringify"] = function (obj) {
    315.         // 把一个对象变为 x-www-form-urlencoded 格式
    316.         let str = ``;
    317.         Object.keys(obj).forEach(key => {
    318.             str += `&${key}=${obj[key]}`;
    319.         });
    320.         return str.substring(1);
    321.     };
    323.     // 暴露API
    324.     typeof window !== "undefined" ? (window.ajax = ajax) : null;
    325.     typeof module !== "undefined" && typeof module.exports !== "undefined"
    326.         ? (module.exports = ajax)
    327.         : null;
    328. })();