Promise总结

为了解决JS的回调地狱，ES 6推出了新的异步调用对象->Promise。

Promise 对象有以下两个特点：

• 对象的状态不受外界影响。有三种状态，分别为 pending（进行中）、fulfilled（已成功）和 rejected（已失败）。
• 一旦状态改变，就不会再变，任何时候都可以得到这个结果。状态改变只有两种可能：从 pending 变为 fulfilled 和从 pending 变为 rejected。

示例1：

const promise = new Promise((resolve, reject) => {
     
  setTimeout(() => {
     
    const num = Math.random();
    if (num > 0.5) {
     
      // 运行正常，传递回调参数
      resolve(num);
    } else {
     
      // 运行异常
      reject(num);
    }
  }, 500);
});

promise.then(
  res => {
     
    console.log("成功:" + res);
  },
  err => {
     
    console.log("失败:" + err);
  }
);

如上：创建了一个Promise对象，如果随机数>0.5，则说明运行成功，如果随机数<0.5，则说明运行异常。

then()方法接收两个参数，分别是Promise运行成功与异常的回调方法。

当然我们也可以用catch捕捉运行时的异常

new Promise(resolve => {
     
    console.log(1);
    resolve('2');
})
    .then((res) => {
     
        console.log(res);
        return new Promise((resolve, reject) => {
     
            setTimeout(() => {
      resolve('hello world!') }, 1000)
        })
    })
    .then((res) => {
     
        console.log(res);
    }, (err) => {
     
        console.log(err);
    }).then((res) => {
     
        // 由于上个then()没有返回值，所以这里就是 undefined
        console.log(res);
        return "Ok"
    }).then(res=>{
     
        // 上个方法返回了一个字符串，会自动包装成Promise对象，由于字符串没有then方法，
        // 返回 Promise 实例的状态从一生成就是resolved状态
        console.log(res)
    })

await/asyc 相当于 Promise的语法糖

对于如下代码：

var couses = [10001,10002,10003] 
courses.forEach(async (val, index) => {
     
        postData(val).ther(res=>{
     
            console.log(val + "处理完毕！");
        })
      
 })
async function postData(courseId) {
     
   return fetch(`localhost:8080/info?couseId=${
       courseId}`)
}

我们可以使用async/await 写出来的代码简洁度更高~

var couses = [10001,10002,10003] 
courses.forEach(async (val, index) => {
     
    	
        await postData(val)
        console.log(val + "处理完毕！");
 })

async function postData(courseId) {
     
   return fetch(`localhost:8080/info?couseId=${
       courseId}`)
}