常州网站建设联系电话,举例网站联盟,广东狮山网站建设,商城建站费用一、什么是Promise Promise是抽象异步处理对象以及对其进行各种操作的组件。Promise本身是同步的立即执行函数解决异步回调的问题#xff0c; 当调用 resolve 或 reject 回调函数进行处理的时候, 是异步操作#xff0c; 会先执行.then/catch等#xff0c;当主栈完成后#…一、什么是Promise Promise是抽象异步处理对象以及对其进行各种操作的组件。Promise本身是同步的立即执行函数解决异步回调的问题 当调用 resolve 或 reject 回调函数进行处理的时候, 是异步操作 会先执行.then/catch等当主栈完成后才会去调用执行resolve/reject中存放的方法。 promise的功能是可以将复杂的异步处理轻松地进行模式化。采用Promise连续读取多个文件可以解决回调地狱。 如果说到基于JavaScript的异步处理我想大多数都会想到利用回调函数。 const promise new Promise(function(resolve, reject) {// ... some code
if (/* 异步操作成功 */){resolve(value);} else {reject(error);}
}); Promise则是把类似的异步处理对象和处理规则进行规范化 并按照采用统一的接口来编写而采取规定方法之外的写法都会出错。 // 使用Promise进行异步处理的一个例子
var promise getAsyncPromise(fileA.txt);
promise.then(function(result){// then 获取文件内容成功时的处理
}).catch(function(error){// catch 获取文件内容失败时的处理
}); Promise本身是同步的立即执行函数 当在executor中执行resolve或者reject的时候, 此时是异步操作 会先执行then/catch等当主栈完成后才会去调用resolve/reject中存放的方法执行。 console.log(script start)
let promise1 new Promise(function (resolve) {console.log(promise1)resolve()console.log(promise1 end)
}).then(function () {console.log(promise2)
})
setTimeout(function(){console.log(settimeout)
})
console.log(script end)
// 输出顺序: script start-promise1-promise1 end-script end-promise2-settimeout
二、ES6 Promises 的API方法 1、参数Promise构造函数接受一个函数作为参数其中该参数又接受两个函数作为它自身的参数分别是resolve和reject。
new Promise((resolve, reject) {//异步操作
})promise.then(function(data) {console.log(success);
}).catch(function(error) {console.log(error);
});
1.1 resolve 返回一个promise对象成功的状态并通知给then方法或catch方法接下来根据对象的状态决定走哪条路然后执行后续操作resolve方法的作用是把promise对象的状态从进行中变成已完成同时可以向resolve方法传入参数这个参数会在将来被promise对象的then方法获取 1.2 reject 返回一个失败的promise对象reject方法也是同样的道理只不过是把promise对象状态变成失败同时传入的参数会被catch方法获取而已。 当resolve或reject修改promise对象状态之后通过检测promise对象的状态决定执行then还是catch回调方法。在这个过程中resolve和reject起到的作用是修改对象状态、通知回调函数以及传递回调函数可能需要的参数。这样做的好处就是把逻辑判断和回调函数分开处理。 2、回调函数 .then 和 .catch
回调函数的调用是根据对象的状态来完成的进行中、已完成和失败pending(待定)、fullfilled(成功)、rejected(失败)
2.1 Promise.then 1. 得到异步任务的正确结果 2. 只有Promsie内部的状态落定了then方法中对应的处理程序才会执行。 3. then方法的强大之处可以链式调用 2.2 Promise.catch 进行捕获和处理失败结果 3、方法 .all() 和 .race()
3.1 Promise.all() 并发处理多个异步任务(等待机制)所有结果都返回之后统一打印谁跑得慢以谁为准执行回调Promise.all 接收一个 promise对象的数组作为参数当这个数组里的所有promise对象全部变为resolve或reject状态的时候它才会去调用 .then 方法。 let wake(time){return new Promise(function (resolve,reject){setTimeout((){resolve(${time/1000}秒后醒来);},time);});
}
let p1wake(10000);
let p2wake(1000);
Promise.all([p1,p2]).then(res{let [res1,res2]res;console.log(res1,res2);
}).catch(err{console.log(err);
})// 执行结果10秒后醒来 1秒后醒来
3.2 Promise.race() 并发处理多个异步任务(赛跑机制) 任何一个异步操作完成就执行下一步的.then请求图片的时候使用谁跑得快以谁为准执行回调 let p1new Promise((resolve,reject){setTimeout((){resolve(success);}, 10000);
});let p2new Promise((resolve,reject){setTimeout((){reject(faild);}, 500);
});Promise.race([p1,p2]).then(res{console.log(res);
}).catch(err{console.log(err); // 返回的是faild
})
三、什么是 async/await async/await 是简化 Promise 异步操作语法糖async 函数返回一个 Promise 对象当函数执行的时候一旦遇到 await 就会先返回等到触发的异步操作完成再执行函数体内后面的语句。可以理解为是让出了线程跳出了 async 函数体 async 函数返回一个 Promise 对象当函数执行的时候一旦遇到 await 就会先返回等到触发的异步操作完成再执行函数体内后面的语句。可以理解为是让出了线程跳出了 async 函数体。 async function async1(){console.log(async1 start);await async2();console.log(async1 end)
}
async function async2(){console.log(async2)
}console.log(script start);
async1();
console.log(script end)// 输出顺序script start-async1 start-async2-script end-async1 end
1、async 语法 自动将常规函数转换成Promise返回值也是一个Promise对象只有async函数内部的异步操作执行完才会执行then方法指定的回调函数异步函数内部可以使用await 2、await 语法 1.await 放置在Promise调用之前await 强制后面点代码等待直到Promise对象resolve得到resolve的值作为await表达式的运算结果 2.await只能在async函数内部使用,用在普通函数里就会报错 3、错误处理 在async函数里无论是Promise reject的数据还是逻辑报错都会被默默吞掉,所以最好把await放入try{}catch{}中catch能够捕捉到Promise对象rejected的数据或者抛出的异常 function timeout(ms) {return new Promise((resolve, reject) {setTimeout(() {reject(error)}, ms); //reject模拟出错返回error});
}
async function asyncPrint(ms) {try {console.log(start);await timeout(ms); //这里返回了错误console.log(end); //所以这句代码不会被执行了} catch(err) {console.log(err); //这里捕捉到错误error}
}asyncPrint(1000);// 执行结果 starterror
