随笔记：Promise 封装ajax_综合

随笔记：Promise 封装ajax

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

Code

 const promiseAjax = new Promise((resolve, reject) => {
        // let timeoutXmlhttp = null;//创建XMLHttpRequestif (window.XMLHttpRequest) {
        // 新版浏览器xhttp = new XMLHttpRequest();} else {
        // code for IE6, IE5xhttp = 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) : "";}});

与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()方法

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

随笔记：Promise 封装ajax

随笔记：Promise 封装ajax

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