当前位置: 代码迷 >> 综合 >> 随笔记:Promise 封装ajax
  详细解决方案

随笔记:Promise 封装ajax

热度:28   发布时间:2023-11-23 07:16:56.0

随笔记:Promise 封装ajax

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

    1.  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) : "";}});
      
  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()方法

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

?

  相关解决方案