ajax与Promise的那些事儿

 /**
       * 简单的异步操作
       */
      function callback() {
        console.log(`我是一个回调函数`);
      }

      console.log(`异步之前`);
      setTimeout(callback, 1000);
      console.log(`异步之后`);
      /**
       * ajax就是典型的异步操作
       */
      // 发起ajax的过程
      const XHR = new XMLHttpRequest();
      console.log(XHR);

      XHR.onreadystatechange = function() {
        if (XHR.readyState === 4) {
          if (XHR.status === 200) {
            console.log(XHR.responseText);
          } else {
            console.log(XHR.status);
          }
        }
      };
      XHR.open('GET', `https://jsonplaceholder.typicode.com/users`, true);
      XHR.send();
      /**
       * jQuery请求
       */
      $.ajax({
        type: 'get',
        url: `https://jsonplaceholder.typicode.com/users`,
        dataType: 'json',
        success: function(res) {
          console.log(res);
        },
        error: function(err) {
          console.log(err);
        }
      });
      /**
       * 用Promise简单的封装一个AJAX函数
       */

      function myAjax(method, url, params) {
        return new Promise((resolve, reject) => {
          const XHR = new XMLHttpRequest();
          XHR.onreadystatechange = function() {
            if (XHR.readyState === 4) {
              if (XHR.status === 200) {
                console.log(XHR.responseText);
              } else {
                console.log(XHR.status);
              }
            }
          };

          // get
          if (method === 'get' || method === 'GET') {
            if (typeof params === 'object') {
              // params拆解成字符串
              params = Object.keys(params)
                .map(function(key) {
                  return (
                    encodeURIComponent(key) +
                    '=' +
                    encodeURIComponent(params[key])
                  );
                })
                .join('&');
            }
            url = params ? url + '?' + params : url;
            XHR.open(method, url, true);
            XHR.send();
          }

          //post
          if (method === 'post' || method === 'POST') {
            XHR.open(method, url, true);
            XHR.setRequestHeader(
              'Content-type',
              'application/json; charset=utf-8'
            );
            XHR.send(JSON.stringify(params));
          }
        });
      }
      /**
       * 使用定时器来模拟异步操作
       *
       */
      let p = new Promise(function(resolve, reject) {
        console.log(resolve); // 成功之后的回调
        console.log(reject); // 失败时候的回调
        setTimeout(() => {
          resolve(100);
        }, 1000);
      });
      p.then(function(data) {
        console.log(data);
      });