Promise 和async/awiat

Promise

1. Promise的作用，promise如何进行多个数据的请求

• Promise对象代表一个异步操作，有三种状态：
  Pending（进行中）；
  Resolved（已完成，又称 Fulfilled）；
  Rejected（已失败）。

• Promise 就是用同步的方式写异步的代码，用来解决回调地狱

• then()方法
  then 方法就是把原来的回调写法分离出来，在异步操作执行完后，用链式调用的方式执行回调函数。
  而 Promise 的优势就在于这个链式调用。我们可以在 then 方法中继续写 Promise 对象并返回，然后继续调用 then 来进行回调操作。

解决传参的回调地狱

 new Promise((resolve,reject)=>{
              // 开始请求数据
                //  ajax()  //伪代码
                // 当数据回来之后调用 resolve(res)
                // 当请求失败之后调用 reject(err)

         })
        // api  http://www.baidu.com  ----> 商品ID A001 ---- > 商品的详情  http://google.com? goodsid=A001 
        axios.get("http://www.baidu.com").then(res=>{

                return new Promise((resvole,reject)=>{
                    let goodsid = res.goodsId
                    axios.get('http://google.com?goodsid=A001').then(res=>{
                            resolve(res)
                    }).catch(err=>{
                          reject(err)
                    })
                })
        }).then(res=>{
             res.xxx
             return new Promise((resolve,reject)=>{
                    axios.get("xxxx?aa=xxx",).then(res=>{
                         resvole(res)
                     }).catch(err=>{
                         reject(res)
                     })
             })
        }).then()

---

命名三个函数 p1 p2 p3运用promise方法     
 
setTimeout() 方法用于在指定的毫秒数后调用函数或计算表达式。

var p1,p2,p3
        p1 = new Promise((resolve, reject) => {
            setTimeout(() => {
                resolve("foo");
            }, 3000);
        })
        p2 = new Promise((resolve, reject) => {
            setTimeout(() => {
                reject("oof");
            }, 500);
        })
        p3 = new Promise((resolve, reject) => {
            setTimeout(() => {
                resolve("ofo");
            }, 1000);
        })

Promise.all可以将多个Promise实例包装成一个新的Promise实例。
同时，成功和失败的返回值是不同的，成功的时候返回的是一个结果数组，而失败的时候则返回最先被reject失败状态的值。

 Promise.all([p1,p2,p3]).then(res=>{
    console.log(res)
    })

谁先完成就调用谁

Promise.race([p1,p2,p3]).then(res=>{
             console.log(res)
             console.log(111111)
        }).catch(err=>{
             console.log(err)
             console.log(222222)
        })

async/await

有一种特殊的语法可以更舒适地与promise协同工作，它叫做async/await

函数前面的async意味着这个函数总是返回一个promise，如果代码中有return 语句，JavaScript会自动把返回的这个value值包装成promise的resolved值。

async function f() {
    return 1
}

所以，async确保了函数返回一个promise，即使其中包含非promise；
还有另一个关键词await，只能在async函数里使用。

关键词await可以让JavaScript进行等待，直到一个promise执行并返回它的结果，JavaScript才会继续往下执行。

async function f() {
    let promise = new Promise((resolve, reject) => {
        setTimeout(() => resolve('done!'), 1000)
    })
    let result = await promise // 直到promise返回一个resolve值（*）
    alert(result) // 'done!' 
}
f()

函数执行到（*）行会‘暂停’，当promise处理完成后重新恢复运行， resolve的值成了最终的result，所以上面的代码会在1s后输出'done!'

强调一下：await字面上使得JavaScript等待，直到promise处理完成，
然后将结果继续下去。这并不会花费任何的cpu资源，因为引擎能够同时做其他工作：执行其他脚本，处理事件等等。

这比promise更加容易阅读和书写。