ES系列之Promise async 和 await

概述

promise是异步编程的一种解决方案，比传统的解决方案—回调函数和事件—更合理更强大。

所谓的promise就是一个容器，里面保存着某个未来才会结束的事件（通常是一个异步操作的结果）。

Promise是一个对象，从它这里可以获取异步操作的信息， Promise提供统一的API，各种异步操作都可以用同样的方法处理。

promise的特点：

1. 对象的状态不受外界影响，promise对象代表一个异步操作，有三种状态：pending(进行中)、Fulfilled(已成功)、Rejected(已失败)。只有异步操作的结果才可以决定当前是哪一种操作状态，任何其他操作都无法改变这种状态。

2. 一旦状态改变就不会再变，任何时候都可以得到这个结果。Promise对象的状态改变只有两种可能：从pending(进行中)变为Fulfilled(已成功)、或者从pending(进行中)变成Rejected(已失败)。状态发生改变就凝固了，不会再变，而是一直保持这个结果，这是就称为Resolved(已定型)。就算改变已经发生，再对Promise对象添加回调函数，也会立即得到这个结果，这个与event完全不同，事件的特点是，如果错过了它，再去监听是得不到结果的。

   有了promise对象，就可以将异步操作以同步操作表示出来，避免了层层嵌套的回调函数。

   Promise的缺点：

   1. 无法取消Promise,一旦新建它就会立即执行，无法中途取消。

   2. 如果不设置回调函数，Promise内部抛出错误不会反应到外部。

   3. 当处于Pending状态时，无法得知目前进展到哪一个阶段了。

基本用法

   let promise = new Promise(function(res, rej) {
       // your code...
   })
   
   promise.then(function(value) {
       // res
   }, function(error) {
       // rej
   })

执行顺序

let promise = new Promise(function(resolve, reject) {
  // resolve, reject 才是真正的异步
  console.log('1')
  resolve()
})

promise.then(() => {
  console.log('2')
})

console.log('3')

// 1 3 2

异步加载图片

// 异步加载图片
function loadImageAsync(url) {
  return new Promise(function(resolve, reject) {
    let image = new Image()

    iamge.onload = function () {
      resolve(image)
    }

    image.onerror = function() {
      reject(new Error('不能加载' + url))
    }

    iamge.src = url
  })
}

模拟AJAX

// promise对象实现AJAX
// getJSON 是对XMLHttpReqest对象的封装，用于发出一个JSON数据的HTTP请求
// 并返回一个Promise对象。需要注意的是，在getJSON内部，resolve函数和reject函数
// 都带有参数

let getJSON = function(url) {
  let promise = new Promise(function(resolve, reject) {
    let client = new XMLHttpRequest()
    client.open('GET', url)
    client.onreadystatechange = handler
    client.responseType = "json"
    client,setRequestHeader('Accept','application/json')
    client.send()

    function handler() {
      if(this.readyState !== 4) {
        return
      }
      if(this.status === 200) {
        resolve(this.response)
      } else {
        reject(new Error(this.statusText))
      }
    }
  })
  return promise
}

getJSON('/posts.json').then(function(json) {
  console.log('Contents:' + json)
},function(error) {
  console.log('error',error)
})

promise中的promise

/**
 * 如果resolve 和 reject 函数都带有参数，那么这些参数会被传递到回调函数。
 * reject函数接收Error对象的实例，表示抛出的错误
 * reslove 函数参数除了正确的值，还有可能是一个Promise对象
 */


let p1 = new Promise(function(resolve, reject) {
  // ...
})

let p2 = new Promise(function(resolve, reject) {
  // ...
  resolve(p1)
})
/**p1 和 p2 都是Promise的实例，但是p2的resolve方法将p1作为参数
 * 即一个异步操作的结果是返回另一个异步操作。
 * p1的状态传递给p2.p1的状态决定了p2的状态
 */

let p1 = new Promise(function(resolve, reject) {
  setTimeout(() => reject(new Error('fail')), 3000)
})

let p2 = new Promise(function(resolve, reject) {
  setTimeout(() => resolve(p1), 1000)
})

p2.then(result => console.log(result)).catch(error => console.log(error))

/**
 * p1 是 一个Promise，3s之后变成rejected。
 * p2 的状态在1s后改变，resolve方法返回的是p1
 */

Promise.prototype.then()

作用：为了Promise实例添加状态改变时的回调。

promise.then(function(value) {
    // res
}, function(error) {
    // rej
})

// then方法有两个参数，第一个参数是Resolved状态的回调函数，第二个参数（可选）是Rejected状态的回调函数。
// then返回的是一个新的Promise实例

Promise.prototype.catch()

Promise.prototype.catch方法是.then(null, rejection)的别名，用于指定发生错误的回调函数。

另外then方法指定的回调函数如果在运行中抛出错误，也会被catch捕获。

一般来说，不要在then方法中定义Rejected状态的回调（即then的第二个参数），而应该总是使用catch方法。

p2.then(result => console.log(result))
.catch(error => console.log(error))
// .catch 处理 p2 和前一个回调函数运行时发生的错误

// ====> 等同于
p2.then(result => console.log(result))
.then(null, err => console.log(err))

Promise.all()

Promise.all方法用于将多个 Promise 实例，包装成一个新的 Promise 实例。

const p = Promise.all([p1, p2, p3]); 
// Promise.all方法接受一个数组作为参数，p1、p2、p3都是 Promise 实例，如果不是，就会先调用下面讲到的Promise.resolve方法， 将参数转为 Promise 实例，再进一步处理。

p的状态由p1、p2、p3决定，分成两种情况。

1）只有p1、p2、p3的状态都变成fulfilled，p的状态才会变成fulfilled，此时p1、p2、p3的返回值组成一个数组，传递给p的回调函数。

2）只要p1、p2、p3之中有一个被rejected，p的状态就变成rejected，此时第一个被reject的实例的返回值，会传递给p的回调函数。

const databasePromise = connectDatabase();

const booksPromise = databasePromise.then(findAllBooks);

const userPromise = databasePromise.then(getCurrentUser);

// booksPromise和userPromise是两个异步操作，只有等到它们的结果都返回了，才会触发pickTopRecommentations这个回调函数。
// 如果作为参数的 Promise 实例，自己定义了catch方法，那么它一旦被rejected，并不会触发Promise.all()的catch方法
Promise.all([booksPromise, userPromise]).then(([books, user]) => pickTopRecommentations(books, user));

async函数

ES7标准引入了async函数，使得异步操作变得简单，——async就是Generator的语法糖。

用法

async函数返回一个Promise对象，可以使用then方法添加回调函数。当函数执行的时候，

一旦遇上await就会先返回，等到异步操作完成，再接着执行函数体内后面

async function getStockPriceByName(name) {
  const symbol = await getStockSymbol(name);
  const stockPrice = await getStockPrice(symbol);
  return stockPrice;
}

getStockPriceByName('goog').then(function (result) {
  console.log(result);
});
// 1、函数前面的async关键字表明该函数内部有异步操作。
// 2、调用该函数会立即返回一个Promise对象

指定多少毫秒输出一个值

function timeout(ms) {
  return new Promise((resolve) => {
    setTimeout(resolve, ms);
  });
}

async function asyncPrint(value, ms) {
  // 一旦遇上await就会先返回，等到异步操作完成，再接着执行函数体内后面的语句。
  await timeout(ms);
  console.log(value);
}

asyncPrint('hello world', 3000); // 3s之后返回 'hello world'

/** ------------- 改写 ------------------ */
async function timeout(ms) {
  await new Promise((resolve) => {
    setTimeout(resolve, ms);
  });
}

async function asyncPrint(value, ms) {
  await timeout(ms);
  console.log(value);
}

asyncPrint('hello world', 3000);

语法

async函数返回一个promise对象，async函数内部return语句返回的值，会成为then方法回调函数的参数。

Promise 对象的状态变化

async函数返回的 Promise对象，必须等到内部所有await命令后面的 Promise 对象执行完，才会发生状态改变，除非遇到return语句或者抛出错误。

也就是说，只有async函数内部的所有异步操作执行完，才会执行then方法指定的回调函数。

正常情况下，await命令后面是一个 Promise 对象。如果不是，会被转成一个立即resolve的 Promise 对象。

async function f() {
  return await 123;
}

// await命令的参数是数值123，它被转成 Promise 对象，并立即resolve。

f().then(v => console.log(v)) // 123

await命令后面的 Promise 对象如果变为reject状态，则reject的参数会被catch方法的回调函数接收到。

async function f() {
  await Promise.reject('出错了');
}

f().then(v => console.log(v))
.catch(e => console.log(e)) // 出错了

只要一个await语句后面的 Promise 变为reject，那么整个async函数都会中断执行。

async function f() {
  await Promise.reject('出错了');
  await Promise.resolve('hello world'); // 不会执行 
}
// 第二个await不会执行

现在，需要在第一个异步操作失败，也不要中断后面的异步操作。

这是可以将第一个await放在try...catch...结构里面，这样不管这个异步操作返回的结果是resolve还是reject都会执行之后的await操作。

async function f() {
  try {
    await Promise.reject('出错了');
  } catch (e) {
    console.log(e);
  }
  return await Promise.resolve('hello world');
}

f().then(v => console.log(v)) // hello world

还有一种方法，就是在第一个await之后使用catch接收失败的回调，处理前面出现的错误。

async function f() {
  await Promise.reject('出错了').catch(e => console.log(e));
  return await Promise.resolve('hello world');
}

f().then(v => console.log(v)) // 出错了 // hello world

错误处理

如果await后面的异步操作出错了，那么等同于async函数返回的Promise对象被reject了。

async function f() {
  await new Promise(function (resolve, reject) {
    throw new Error('出错了');
  });
}

f().then(v => console.log(v)).catch(e => console.log(e)) // Error：出错了
// async函数f执行后，await后面的 Promise 对象会抛出一个错误对象，
// 导致catch方法的回调函数被调用，它的参数就是抛出的错误对象。

// 有多个await命令，则可以统一放在try...catch...结构中
async function main() {
  try {
    const val1 = await firstStep();
    const val2 = await secondStep(val1);
    const val3 = await thirdStep(val1, val2);

    console.log('Final: ', val3);
  } catch (err) {
    console.error(err);
  }
}

await使用注意点

第一点，前面已经说过，await命令后面的Promise对象，运行结果可能是rejected，所以好把await命令放在try...catch代码块中。

async function myFunction() {
  try {
    await somethingThatReturnsAPromise();
  } catch (err) {
    console.log(err);
  }
}

// 另一种写法 

async function myFunction() {
  await somethingThatReturnsAPromise().catch(function (err) {
    console.log(err);
  });
}

第二点，多个await命令后面的异步操作，如果不存在继发关系，好让它们同时触发

// 写法一 
let [foo, bar] = await Promise.all([getFoo(), getBar()]);

// 写法二 
let fooPromise = getFoo();
let barPromise = getBar();
let foo = await fooPromise;
let bar = await barPromise;

第三点，await命令只能用在async函数之中，如果用在普通函数，就会报错。

async function dbFuc(db) {
  let docs = [{}, {}, {}];
  // 报错
  docs.forEach(function (doc) {
    await db.post(doc);
  });
}

// 如果将forEach方法的参数改成async函数，也有问题。
function dbFuc(db) { //这里不需要 async
  let docs = [{}, {}, {}];
  // 可能得到错误结果
  docs.forEach(async function (doc) {
    await db.post(doc);
  });
}
// 原因是这时三个db.post操作将是并发执行，也就是同时执行，而不是继发执行。正确的写法是采用for循环。

async function dbFuc(db) {
  let docs = [{}, {}, {}];
  for (let doc of docs) {
    await db.post(doc);
  }
}

// 如果确实希望多个请求并发执行，可以使用Promise.all方法。当三个请求都会resolved时，下面两种写法效果相同。

async function dbFuc(db) {
  let docs = [{}, {}, {}];
  let promises = docs.map((doc) => db.post(doc));

  let results = await Promise.all(promises);
  console.log(results);
}

// 或者使用下面的写法 

async function dbFuc(db) {
  let docs = [{}, {}, {}];
  let promises = docs.map((doc) => db.post(doc));

  let results = [];
  for (let promise of promises) {
    results.push(await promise);
  }
  console.log(results);
}

实例

 var pro = new Promise(function(){
      var a = 1;
})
console.log(pro); 

读文件的方法

const fs = require('fs')

// 总结：只要 new 了一个具体的异步操作，这个异步操作被创建的一瞬间，就会立即执行；
function readFileByPath(fpath) {
  const p = new Promise(function() {
    fs.readFile(fpath, 'utf-8', (err, result) => {
      if (err) return console.log('读文件失败：' + err.message)
      console.log(result)
    })
  })
}

readFileByPath('./files/3.txt') // 文件必须存在

使用.then()进一步封装读文件的操作

封装原则：不要在方法内部显示结果，要把结果返回给调用者，不要提调用者做决定！！

 使用.catch()进一步封装读文件的操作

const fs = require('fs')

function readFileByPath(fPath) {
  return new Promise(function(resolve,reject){
    fs.readFile(fPath, 'utf-8', (err, result) => {
      if (err) return reject(arr)
      resolve(result)
    })
  })
}

// 一般.then()方法中，失败的回调可以省略，但是省略以后读取文件失败时，无法接收结果
// 这是，我们可以使用.catch() 来指定失败的回调
/* --------------读一个-------------------- */
readFileByPath('./files/1.txt')
  .then(function(result) {
    console.log(result)
  })
  .catch(err => console.log(err.message))

/* ---------------读多个----------------------- */
readFileByPath('./files/1.txt')
  .then(function(result){
    console.log(result)
    return readFileByPath('./files/2.txt')
  })
  .then(function(result){
    console.log(result)
    return readFileByPath('./files/3.txt')
  })
  .catch(err => console.log(err.message))

 async和await

const fs = require('fs')

function readFileByPath(fPath) {
  return new Promise(function(resolve,reject){
    fs.readFile(fPath, 'utf-8', (err, result) => {
      if (err) return reject(arr)
      resolve(result)
    })
  })
}

// async 用来修饰异步方法
// await 只能用在被 async 修饰的方法中
// 同时，await 是用来修饰 Promise 实例对象的；简化promise对象

console.log("开始");
async function readAll () {
  console.log("方法头部");
  const result1 = await readFileByPath('./files/1.txt')
  console.log(result1)
  const result2 = await readFileByPath('./files/2.txt')
  console.log(result2)
  const result3 = await readFileByPath('./files/3.txt')
  console.log(result3)
  console.log("方法尾部");
}
console.log("结束");

readAll()

运行顺序：

原因：

/* async修饰的 readAll()方法异步方法，在调用这个readAll()方法的时候，js主线程进入这个方法

这时，还是主线程在执行，输出“方法头部”，然后在 await是异步操作，这是主线程就退出这个方法，

执行“结束”，然后就是异步的方法顺序执行 */