Promise和async/await

1、promise对象

promise 对象有三种状态：pending（进行中）、fulfilled（已成功）和 rejected（已失败）。promise 对象的状态改变，只有两种可能：从 pending 变为 fulfilled 和从 pending 变为 rejected。

const promise = new Promise(function(resolve, reject) {
  if (){
    resolve(value);
  } else {
    reject(error);
  }
});

promise 构造函数接受一个函数作为参数，该函数的两个参数分别是 resolve 和 reject，它们是两个函数，由 JavaScript 引擎提供，不用自己部署。

resolve 函数将 promise 对象的状态从“未完成”变为“成功”（即从 pending 变为 resolved）可以将数据作为参数传递出去。reject 函数的作用是，将 promise 对象的状态从“未完成”变为“失败”（即从 pending 变为 rejected），也可以将某些错误信息作为参数传递出去。

由于Promise 新建后会立即执行，所以可以在 promise 外面再包裹一层函数：

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

timeout(100).then((value) => {
  console.log(value);
});

1.1、then() 方法

Promise 实例是一个对象，不是一个函数。promise 实例生成以后，可以用 then 方法分别指定 resolved 状态和 rejected 状态的回调函数。

let promise = new Promise(function(resolve, reject) {
  if (){
    resolve(value);
  } else {
    reject(error);
  }
});

promise.then(function(value) {
  console.log(value)
}, function(error) {
  console.log(error)
});

then 方法可以接受两个回调函数作为参数。第一个回调函数是 promise 对象的状态变为 resolved 时调用，第二个回调函数是 promise 对象的状态变为 rejected 时调用，第二个函数是可选的，不一定要提供。这两个函数都接受 promise 对象传出的值作为参数。

1.2、then() 方法的链式写法

then 方法返回的是一个新的 promise 实例，因此可以采用链式写法，即 then 方法后面再调用另一个 then 方法。

1.2.1、then 方法里面返回一个确定值时

在一个 then() 方法里面你可以 return 一个确定的“值”，此时 then 会将这个确切的值传入一个默认的新的 Promise 实例，并且这个 Promise 实例会立即置为 fulfilled 状态，将 return 的值作为 resolve 方法的参数传递出去，以供接下来的 then 方法里使用。

let p1 = new Promise((resolve,reject) => {
    resolve('aaa')
})
p1.then((data) => {
    data = data + 'bbb'
    return data　　// 此时data会作为resolve的参数传递出去
}).then((val) => {
    console.log(val + ' sucess');
},(err) => {
    console.log(err + ' error');
})

//输出： aaabbb sucess

扫描二维码关注公众号，回复： 6958588 查看本文章

1.2.1、then 方法里面返回一个 promise 实例

如果 then 方法里面返回的还是一个 promise 对象，这时后一个回调函数，就会等待该 promise 对象的状态发生变化，才会被调用。

//第一个异步任务
function a(){
  return new Promise(function(resolve, reject){
     resolve("a函数");
  });
}
//第二个异步任务
function b(data_a){
  return new Promise(function(resolve, reject){
     console.log(data_a);
     resolve("b函数");
  });
}

//连续调用
a().then(function(data){   
    return b(data);      // 此时then方法里面返回的是一个promise对象，后面的then会等待该promise对象的状态发生改变才会被调用
}).then((data) => {
    console.log(data + 'sucess')
}, (err) => {
    console.log(err + 'rejected')
})
//输出：a函数  b函数sucess

上面的最后一个 then 函数等待前面的 then 函数里面的 promise 对象状态发生改变，如果变为 resolved ，就调用第一个回调函数，如果状态变为 rejected，就调用第二个回调函数。

1.2.1、then 方法里面不返回

如果 then 方法不返回数据，那么后面的 then 将无法获取到前面的数据，但是后面的 then 方法仍能执行。

//第一个异步任务
function a(){
  return new Promise(function(resolve, reject){
     resolve("a函数");
  });
}
//第二个异步任务
function b(data_a){
  return new Promise(function(resolve, reject){
     console.log(data_a);
     resolve("b函数");
  });
}

a().then(function(data){   
    console.log(data)    //不返回
}).then((data) => {
    console.log(data + ' sucess')
}, (err) => {
    console.log(err + ' rejected')
})
//输出： a函数  undefined sucess

1.3、catch() 方法

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