Promise、async、await 异步解决方案

参考： http://www.javashuo.com/article/p-ohkdrkdv-eh.html  或  https://www.jianshu.com/p/fe0159f8beb4（推荐这个，比较清晰）

---

 Promise ：https://www.jianshu.com/p/fe0159f8beb4

一、Promise 对象 ：Promise 对象是一个代理对象。（new Promise 建立的Promise 对象，是经过里面的代码逻辑决定状态的改变的。下面二、3点建立的Promise 状态改变的定好了的。）

二、Promise.resolve()  ：将现有对象转为 Promise 对象的快捷方式。（注意，这个不是Promise实例的方法，不要混为一谈。即 new Promise 和 Promise.resolve() 都是建立Promise 对象的方法）

　  Promise.resolve() 的参数 分 4 种状况：http://www.javashuo.com/article/p-ocdwlgvr-nc.html

　a、不带有任何参数，直接返回一个resolved状态的 Promise 对象。

    const p = Promise.resolve()

    p.then(res => {
      console.log(res) // undefined
    })

　b、传一个普通的对象，将普通对象 转为 Promise 对象

let p1 =Promise.resolve({name:'xixi',age:'xxxx'});

p1.then(result => {
    console.log(result);  // {name: "xixi", age: "xxxx"}
});

    c、传一个 Promise 对象实例， Promise.resolve将不作任何修改、原封不动地返回这个实例。

    let p = new Promise((resolve, reject) => {
      setTimeout(() => {
        resolve('success')
      }, 500)
    })

    let pp = Promise.resolve(p)

    pp.then(result => {
      console.log(result) // success
    })

    console.log(pp === p) // true

　  d、传一个 thenable对象（thenable对象指的是具备then方法的对象），Promise.resolve方法会将这个对象转为 Promise 对象，而后就当即执行thenable对象的then方法。（通常不会使用这种状况的参数，这里不详细说明）

    let thenable = {
      then: function (resolve, reject) {
        resolve(42) // 这里 then函数返回的不是一个 Promise对象就不会执行下面那个then里面的函数
      }
    }
    let p1 = Promise.resolve(thenable)
    p1.then(function (value) {
      console.log(value) // 42
    })

三、Promise.reject()  ：快速的获取一个拒绝状态的 Promise 对象。（这个方法 和 Promise.resolve() 方法是同样功能。Promise 对象会有两个状态变化，Promise.reject()建立的对象就是执行catch中的函数）

　  注意：Promise.reject() 后面没有 catch 函数就会报错的。Promise.resolve() 后面没有 then函数是 不会报错的。

四、Promise.resolve().then()  的 执行顺序比 setTimeout(fn, 0) 先。同步程序确定比 异步Promise 对象先执行。

setTimeout(function () {
　　console.log('three');
}, 0);

Promise.resolve().then(function () {
　　console.log('two');
});

console.log('one');
// one
// two
// three

五、Promise 对象的回调函数（then或catch）中没有return ，执行后的 至关于 返回  没有参数的 Promise.resolve() 对象。

    var resolve = Promise.resolve('resolve')
      .then(res => {
        console.log('resolveSuc',res)
      })
      .catch(err => {
        console.log('resolveErr',err)
      })
    var reject = Promise.reject('reject')
      .then(res => {
        console.log('rejectSuc',res)
      })
      .catch(err => {
        console.log('rejectErr',err)
      })

    setTimeout(function () {
      console.log(resolve) // Promise {<resolved>: undefined}
      console.log(reject) // Promise {<resolved>: undefined}
    }, 0)

六、Promise.reject() 对象 有多个 then 函数，只有一个catch 函数（任意位置），链式函数会先执行 catch 里面的函数，而且从这个 catch 开始继续执行下面的链式写法的函数。（Promise.resolve()一样的道理，从第一个then开始连续问下执行）

    Promise.reject('resolve')
    .then(res => {  console.log('sucess1', res) })
    .then(res => {  console.log('sucess2', res) })
    .catch(() => {  console.log('fail_1')
    })
    .then(res => {
      console.log('sucess5', res)
      return Promise.reject('resolve')
    })
    .then(res => {  console.log('sucess6', res) })
    .catch(() => {  console.log('fail_2')  })
    
    // fail_1
    // sucess5 undefined
    // fail_2

 

---

 

 Async-Await （这是 es8 的内容）  http://www.javashuo.com/article/p-ogxfiwfh-z.html

一、async用于申明一个function是异步的。而 await 能够认为是async wait的简写，等待一个异步方法执行完成。（Async-Await 是 寄生于 Promise的）

二、async 函数 执行后返回的是一个 promise 对象，而不是 普通函数具体的  返回值。（promise 对象是须要经过 then或catch 添加回调函数的）。

    async function timeout () {
      return 'hello world'
    }
    console.log(timeout()) // Promise {<resolved>: "hello world"}
    console.log('虽然在后面，可是我先执行')

三、await 只能在 async 定义的函数里面 使用，不能单独使用。实际上，await是强制把异步变成了同步。（await 后面能够听任何表达式，通常都是promise对象，由于放同步的表达式就没有 等待的意义了。）

async getFaceResult () {
                try { // 注意，这里使用try...catch 捕获 异常
                    let location = await this.getLocation(this.phoneNum);
                    if (location.data.success) {
                        let province = location.data.obj.province;
                        let city = location.data.obj.city;
                        let result = await this.getFaceList(province, city);
                        if (result.data.success) {
                            this.faceList = result.data.obj;
                        }
                    }
                } catch(err) {
                    console.log(err);
                }
            }

 

 

我的体会 ：一、Async-Await 使得 异步代码内的异步，能够同步执行。（简单理解，就是多个异步程序嵌套，只要经过 Async 告诉程序，最外围的一个函数是异步就能够了，里面的异步所有变成同步的执行。）

　　　　　　这种 程序控制   在 某个请求 须要另外一个请求返回的参数，这种多层请求嵌套的 时候 就很是有优点。

　　　　　 二、promise 解决了回调函数不能 返回 数据的问题。由于promise是异步返回的数据不知道什么才有，因此基本没什么用。可是 await 的出现，使得 promise返回的数据能够进行使用了。（即异步回调函数的返回值能够控制何时使用了）

 　　　　　三、Async-Await 至关于声明一个异步的程序空间，在这个空间中让异步的程序，同步执行。这样就不用再异步程序中嵌套回调函数了，所有都是同步的写法，而且加强是代码可读性。  http://www.javashuo.com/article/p-ndomjibl-ec.html （这里的执行顺序，并非想固然的那样，有时间在研究下）