Promise学习

Promise含义

容器，保存异步操作的结果
对象，获取异步操作的消息

Promise对象特点

1. 对象的状态不受外界影响
2. 一旦状态改变就不会再变

pending(进行中) -> fulfilled（已成功）
pending(进行中) -> rejected（已失败）

Promise的构造函数

• 接受参数：函数
• 传参：

resolve() 成功
reject() 失败

重写setTimeout函数

• 原始

function onClick(){
  setTimeout(alert('click'),3000)
}

• promise改写

var onClick = new Promise(function(resolve,reject){
  setTimeout(function(){
    alert('click')；
    resolve（’success‘）；
  },3000);
});

一般将Promise包在函数中，需要的时候使用

function testAsync(){
  var onClick ...;
  
  return onClick;
}

testAsync();

then方法

在异步操作执行完后，用链式调用的方式执行回调函数。
接受参数：函数
传参：resolved和reject
返回： 新的Promise实例或直接返回数据

testAsync().then(function funcA(data){
  console.log(data);
  return '新的数据';
  // return testAsync2();
}，function funcB(err){
  console.log(err);
})

其他方法

catch 错误回调函数
all 并行执行异步操作
race 多个实例中的一个率先改变状态（应用，超时reject）

async和await

async函数

• Generator函数的语法糖，函数内有异步操作
• 返回： Promise对象
• 函数内部return返回的值，会成为then方法回调函数的参数

await命令

• 等待标志，其后是 ：
  • Promise 对象，需要等待结果
  • 值，直接返回对应的值
• 内部 then 命令的语法糖

最好放在try...catch中
只能用在async函数之中

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

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

asyncPrint('hello world', 50);

关系

async函数返回 Promise 对象，可以作为await命令的参数

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

多个请求并发执行，使用Promise.all

优点

• 相比较 Generator 函数实现简洁
• 相比较 Promise 写法更加清晰，更符语义

const wait = async(n)=>{
  return new Promise(resolve=>{
    resolve()
  });
}