随笔记: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相关知识
- 两种状态:成功resolve/失败reject
- 从pending–>resolve
- 从pending --> reject
- ??并且状态一旦改变,就不能再更改
- promise.then方法
- promise.catch方法 ,相当于reject的语法糖,用于捕捉失败的回调
- promise.finally 方法,不管成功或失败,都会执行
- ? then、catch和finally方法
- 这三种方法都是返回新的promise对象
- 【注】async/await 函数的返回值也是promise对象,并且await后面的值会被视为异步调用,即使时一个确定的值
- 例: await 8;
- promise.all 方法
- 接收一个可迭代对象作为参数,对象中每个参数都是promise实例,如果不是,就会调用promise.resolve方法,将其转换为promise 实例
- 只有当可迭代对象中的promise都成功时,promise.all 方法才会返回成功
- 遇到第一个失败时,promise.all 直接剖出失败,但后面的promise 依然会执行,但是会被静默掉
- promise.race 方法
- 接收一个可迭代对象作为参数,对象中每个参数都是promise实例,如果不是,就会调用promise.resolve方法,将其转换为promise 实例
- 有一个成功,就会立即返回其resolve值,后面的再成功,会被静默
- 所有的都是失败,才会返回失败
- 还有
- ES2020 引入了
Promise.allSettled()
方法 - ES2021 引入了
Promise.any()
方法
- ES2020 引入了
- 两种状态:成功resolve/失败reject
世界上任何书籍都不能带给你好运,但是它们能让你悄悄变成你自己—赫尔曼.黑塞。
?