Promise的理解和用法

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");    }}复制代码

转载于:https://juejin.im/post/5c80b357f265da2dcf62b03b