随笔记：Promise 封装ajax

随笔记：Promise 封装ajax

1. 上次工作中用到了利用Promise封装ajax，对外部客户端进行调用，今天忽然想起来了，总结一下。希望疫情抓紧结束 👐

2. Code

   1.  const promiseAjax = new Promise((resolve, reject) => {
            // let timeoutXmlhttp = null;
            //创建XMLHttpRequest
            if (window.XMLHttpRequest) {
              // 新版浏览器
              xhttp = new XMLHttpRequest();
            } else {
              // code for IE6, IE5
              xhttp = new ActiveXObject("Microsoft.XMLHTTP");
            }
            if (xhttp.overrideMimeType) {
              xhttp.overrideMimeType('text/xml');
            }
            // timeoutXmlhttp = setTimeout(function () {
            //   xhttp.abort();
            // }, 300000);
            // 初始化请求方式和接口地址
            xhttp.open("get", BaseUrl + '?' + qs.stringify(data), true);
            // 发送请求
            // xhttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
            // xhttp.send(qs.stringify(data));
            xhttp.send();
            // 处理响应结果
            xhttp.onreadystatechange = function () {
              // 请求已完成且响应已就绪
              if (xhttp.readyState === 4) {
                // if (timeoutXmlhttp) clearTimeout(timeoutXmlhttp);
                //响应成功或客户端缓存
                if (xhttp.status === 200 || xhttp.status === 304) {
                  // 成功
                  resolve(xhttp.responseText);
                } else {
                  // 失败
                  reject({
                    flag: 2,
                    message: "新拍照客户端未启动"
                  });
                }
              }
            };
          });
          let selfOut = self;
          promiseAjax.then(
            value => {
          //成功部分      
              // 启动客户端成功
              let res = JSON.parse(value);
              if (res.flag === 1) {
                // 认证活体成功
                imgData = "data:image/jpeg;base64," + res.bestImage.image_data;
                delta = res.delta;
                callFasType = res.call_fas_type || '';
                // count 为1，res.bestImages不存在
                if (res.bestImages) {
                  imgDataList = res.bestImages.map(item => {
                    return "data:image/jpeg;base64," + item.image_data;
                  })
                }
                imgDataList.push(imgData);
                typeof takePhotoCallback === "function" ?
                  takePhotoCallback(imgData, imgDataList, delta, callFasType) :
                  "";
              } else if (res.flag === 0) {
                // 认证活体失败
                selfOut.$message({
                  type: "error",
                  message: "活体检测未通过"
                });
              }
            },
            error => {
                //失败部分
              // 客户端启动失败
              console.log(error);
              if (error.flag === 2) {
                selfOut.$message({
                  type: "error",
                  message: error.message
                });
                //   typeof callbackFail === "function" ? callbackFail(true) : "";
              }
            }
          );
      

3. 与promise相关知识

   1. 两种状态：成功resolve/失败reject
      1. 从pending–>resolve
      2. 从pending --> reject
      3. ⭐️并且状态一旦改变，就不能再更改
   2. promise.then方法
   3. promise.catch方法 ，相当于reject的语法糖，用于捕捉失败的回调
   4. promise.finally 方法，不管成功或失败，都会执行
   5. 🌟 then、catch和finally方法
   6. 这三种方法都是返回新的promise对象
   7. 【注】async/await 函数的返回值也是promise对象，并且await后面的值会被视为异步调用，即使时一个确定的值
      1. 例： await 8；
   8. promise.all 方法
      1. 接收一个可迭代对象作为参数，对象中每个参数都是promise实例，如果不是，就会调用promise.resolve方法，将其转换为promise 实例
      2. 只有当可迭代对象中的promise都成功时，promise.all 方法才会返回成功
      3. 遇到第一个失败时，promise.all 直接剖出失败，但后面的promise 依然会执行，但是会被静默掉
   9. promise.race 方法
      1. 接收一个可迭代对象作为参数，对象中每个参数都是promise实例，如果不是，就会调用promise.resolve方法，将其转换为promise 实例
      2. 有一个成功，就会立即返回其resolve值，后面的再成功，会被静默
      3. 所有的都是失败，才会返回失败
   10. 还有
       1. ES2020 引入了Promise.allSettled()方法
       2. ES2021 引入了Promise.any()方法

世界上任何书籍都不能带给你好运，但是它们能让你悄悄变成你自己—赫尔曼.黑塞。

​