1:Promise的基本概念:
Promise是javascript在es6中新发布的一个管理异步编程的方案。其实就是一个对象,该对象在异步执行过程中不会直接给结果而是给一个“承诺”,要兑现这个承诺就要使用then方法。
eg:
function sleep () { return new Promise (function(resolve,reject){ resolve("hello"); })}sleep().then(res=>console.log(res)) //hell0复制代码
上面这个例子中sleep函数在执行完之后,返回了一个Promise实例对象,该实例对象最终返回了一个参数"hello",而then方法就兑现了Promise实例对象的承诺(此处承诺就是hello)。这个例子说明在使用Promise执行异步函数时,一定要使用then方法接收Promise实例对象最终返回数据。
2:Promise的返回的状态
在Promise对象里接收一个函数作为参数,这个函数中有两个参数分别是:resolve函数,reject函数。resolve函数返回执行成功后的结果,reject函数返回执行失败后的结果。
function sleep (duration) { return new Promise (function(resolve,reject){ reject("this is error"); })}sleep().catch(error=>console.log(error)) //this is error复制代码
3:结合async和await特性使用
async和await是es6标准中制定的新特性,结合Promise可以编写出看似同步实则异步的函数。这里划重点await必须要在async函数内部才可以使用。
这里给大家一个小例子理解async和await结合Promise的用法。
实例:红绿灯(实现一个红绿灯,把一个圆形div按照绿色3秒,黄色1秒,红色2秒循环改变背景颜色)
function sleep (duration) { return new Promise (function(resolve){ setTimeout(resolve,duration) })}async function changeColor (duration,color){ document.getElementById("circle").style.background = color; await sleep(duration)}async function main() { while(true){ await changeColor(3000,"green"); await changeColor(1000,"yellow"); await changeColor(2000,"red"); }}复制代码