ajaxPromise封装

/*

ajax

A 异步地

J 使用JS发起http请求

A 并且在数据回来时（异步事件）

X 渲染XML/HTML

跨域三招

+ 服务端配置响应头：Access-Control-Allow-Origin:*

+ JSONP: script标签的src属性不受同源策略(CORS-policy)限制 +返回的内容当做JS代码立即执行： onDataGot({一个海量的JSON数据})

+ 配置代理： 让服务器替你访问/Nginx

http {

    ...

    server {

        ...

        location /mul {

            proxy_pass http://localhost:8000/calc/multiply

        }

    }

}

*/

function objToParams(obj) {

  let str = "";

  for (let key in obj) {

    str += `&${key}=${obj[key]}`;

  }

  // &name=heige&pwd=123456

  return str.slice(1);

}

function ajax({ url, method, dataType, data, onSuccess, onFail }) {

  let reqBody = null;

  /*  */

  method = method || "GET";

  onSuccess = onSuccess || ((data) => console.log("defaultSuccess:data", data));

  onFail = onFail || ((err) => console.log("defaultFail:err", err));

  const xhr = new XMLHttpRequest();

  xhr.open(method, url);

  /* dataType */

  switch (dataType) {

    case "form":

      xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");

      reqBody = objToParams(data);

      break;

    case "json":

      xhr.setRequestHeader("Content-Type", "application/json");

      reqBody = JSON.stringify(data);

      break;

    default:

      break;

  }

  xhr.onload = function () {

    onSuccess(xhr.responseText);

  };

  xhr.onerror = function (err) {

    onFail(err);

  };

  xhr.send(reqBody);

}

// ajax({

//   url: "http://www.httpbin.org/post",

//   method: "POST",

//   dataType: "form",

//   data: { name: "heige", pwd: "123456" },

//   onSuccess: (data) => console.log("data=", data),

//   onFail: (err) => console.log("err=", err),

// });

function ajaxPromise(config) {

  return new Promise((resolve, reject) => {

    ajax({

      ...config,

      onSuccess: (data) => resolve(data),

      onFail: (err) => reject(err),

    });

  });

}

ajaxPromise({

  url: "http://www.httpbin.org/post",

  method: "POST",

  dataType: "form",

  data: { name: "heige", pwd: "123456" },

  // onSuccess: (data) => console.log("data=", data),

  // onFail: (err) => console.log("err=", err),

})

  .then((data) => console.log("data=", data))

  .catch((err) => console.log("err=", err));