promise使用详解

原文链接以及promise练习题

先说结论：
promise是解决异步函数的一种方案 将异步操作以同步方式展现出来 避免了回调地狱
1.三种状态：padding–等待 resolved–成功–then rejected–失败–catch
2.promise上有then和catch方法 then接受一个参数是函数 这个函数的值就是我们resolve的结果 catch接受一个参数是函数 这个函数的值就是我们rejected的结果
3.一个promise只能返回一个第一个resolve 且执行顺序是先执行函数内的同步代码 在执行resolve结果

4.Promise.all() 参数是一个数组 数组每个元素返回一个promise对象
5.这样多个异步函数就并行执行了 等到都执行完 会触发Promise自己的then （相当于执行慢 以谁为标准执行回调）
6.多个异步promise执行的结果 返回的then的参数内 也是一个数组形式 （执行的结果就是数组的顺序）
7.适应场景 在首页加载多个异步函数 在一个函数内返回所有的参数数组 在使用

8.Promise.race() 和all类似 参数是数组
9.但是返回的结果 只会是其中执行最快的那个异步函数的resolve结果 （也就是说其他异步是执行了 但是只是返回最快的那个异步的resolve结果）

event loop：先执行同步 遇到异步后执行 异步里的微任务先执行 异步里的宏任务后执行 await下面所有的代码都是异步
微任务：Promise，nextTick，callback，Object.observe，MutationObserver
宏任务：script代码块，setTimeout，setInterval，I/O

注意点：
var p = new Promise((resolve, reject) => {
console.log(‘1’);
}) 这是正常的同步直接执行
.
function fn() {
var p = new Promise((resolve, reject) => {
console.log(‘1’);
})
return p
}
fn() 这是正常的同步直接执行
.
async function fn() {
console.log(1); // 同步1
await async2(); // 先执行async2()，再await
console.log(2); // 异步（await下面所有的代码都是异步）
}
async function async2() {
console.log(3); // 同步2
}
fn() 这是正常的同步直接执行

Promise是异步编程的一种解决方案，将异步操作以同步操作的流程表达出来，避免了层层嵌套的回调函数。

它有三种状态，分别是 pending-进行中，resolved-已完成，rejected-已失败

Promise构造函数接收一个参数，这个参数是函数，并且这个函数传入两个参数，分别是 resolve 和 reject，分别是异步操作执行成功后的回调函数，和异步操作执行失败后的回调函数。（按照标准来讲，resolve是将Promise的状态置为fullfiled，reject是将Promise的状态置为rejected。）
所以我们用Promise的时候一般是包在一个函数中，在需要的时候去运行这个函数，如：

function runAsync(){
  var p = new Promise((resolve,reject)=>{
      setTimeout(function(){
        console.log('执行完成');
        resolve('随便什么数据')
}，2000)
})  
return p;  
}

runAsync();

在我们包装好的函数最后，会return出Promise对象，也就是说，执行这个函数我们得到了一个Promise对象。
Promise对象上有then 和 catch方法。

runAsync().then(function(data){
  console.log(data)    //'随便什么数据'
  //后面可以用传过来的数据做些其他操作
  //......
})

在runAsync()的返回上直接调用then方法，then接收一个参数，是函数，并且会拿到我们在runAsync中调用resolve时传的的参数。

这时候你应该有所领悟了，原来then里面的函数就跟我们平时的回调函数一个意思，能够在runAsync这个异步任务执行完成之后被执行。这就是Promise的作用了，简单来讲，就是能把原来的回调写法分离出来，在异步操作执行完后，用链式调用的方式执行回调函数。

而Promise的优势在于，可以在then方法中继续写Promise对象并返回，然后继续调用then来进行回调操作。

链式操作的用法
从表面上看，Promise只是能够简化层层回调的写法，而实质上，Promise的精髓是“状态”，用维护状态、传递状态的方式来使得回调函数能够及时调用，它比传递callback函数要简单、灵活的多。所以使用Promise的正确场景是这样的：

function runAsync1(){
    var p = new Promise(function(resolve, reject){
        //做一些异步操作
        setTimeout(function(){
            console.log('异步执行1完成');
            resolve('随便什么数据1');
        }, 2000);
    });
    return p;            
}
function runAsync2(){
    var p = new Promise(function(resolve, reject){
        //做一些异步操作
        setTimeout(function(){
            console.log('异步执行2完成');
            resolve('随便什么数据2');
        }, 2000);
    });
    return p;            
}
function runAsync3(){
    var p = new Promise(function(resolve, reject){
        //做一些异步操作
        setTimeout(function(){
            console.log('异步执行3完成');
            resolve('随便什么数据3');
        }, 2000);
    });
    return p;            
}


runAsync1()
.then(function(data){
  console.log(data);
  return runAsync2()
})
.then(function(data){
  console.log(data);
  return runAsync3()
})
.then(function(data){
  console.log(data)
})

//2秒后打印
"异步执行1完成"
"随便什么数据1"

//又2秒后打印
"异步执行2完成"
"随便什么数据2"

//又2秒后打印
"异步执行3完成"
"随便什么数据3"

在then方法中，可以直接return 数据，而不是Promise对象，在后边的then中就可以接受到数据了。

runAsync1()
.then(function(data){
  console.log(data);
  return runAsync2()
})
.then(function(data){
  console.log(data);
  return "直接返回数据"
})
.then(function(data){
  console.log(data)
})

//2秒后打印
"异步执行1完成"
"随便什么数据1"

//又2秒后打印
"异步执行2完成"
"随便什么数据2"
"直接返回数据"

reject的用法
我们前面的例子都是只有“执行成功”的回调，还没有“失败”的情况
reject就是把Promise的状态设置为 rejected,这样我们在then中就能捕捉到，然后执行失败情况的回调。

function getNumber(){
  return new Promise((resolve,reject)=>{
    setTimeout(function(){
      var num = Math.ceil(Math.random()*10) //生成0-10之间的整数
      if(num<=5){
        resolve(num)
      }else{
        reject('数字太大了')
      }
    },2000)
  })
}

getNumber()
.then(
  function(data){
    console.log('resolved')
    console.log(data);
  },
  function(reason,data){
    console.log('rejected')
    console.log(reason)
  }
)

getNumber函数用来异步获取一个数字，2秒后执行完成，如果数字小于等于5，我们认为是“成功”了，调用resolve修改Promise的状态。否则我们认为是“失败”了，调用reject并传递一个参数，作为失败的原因。 运行getNumber并且在then中传了两个参数，then方法可以接受两个参数，第一个对应resolve的回调，第二个对应reject的回调。所以我们能够分别拿到他们传过来的数据

catch 的用法
我们知道 Promise除了有一个then方法，还有一个catch方法，它是干什么的呢？
其实它跟then方法的第二个参数的作用是一样的。用来指定reject的回调。
它的用法：

getNumber()
.then(
  function(data){
    console.log('resolved')
    console.log(data);
  }
)
.catch(
  function(reason){
    console.log('rejected')
    console.log(reason)
  }
)

效果和写在then的第二个参数里面一样。不过它还有另外一个作用，在执行resolve的回调(也就是then方法的第一个参数)时，如果抛出异常(代码出错了)，那么并不会报错卡死JS，而是会进入到catch方法中

getNumber()
.then(function(data){
    console.log('resolved');
    console.log(data);
    console.log(somedata); //此处的somedata未定义
})
.catch(function(reason){
    console.log('rejected');
    console.log(reason);

在 resolve的会调用，我们console.log(somedata)，而somedata是未定义的，如果不用Promise,代码运行到这里，就直接在控制台报错了，不往下运行了。但是在这里会得到这样的结果：

也就是说进到catch方法里面去了，而且把错误原因传到了reason参数中。即便是有错误的代码也不会报错了，这与我们的try/catch语句有相同的功能。

all方法
Promise.all()提供了并行执行异步操作的能力。并且在所有异步操作执行完成以后，才执行回调。

Promise
.all([runAsync1(), runAsync2(), runAsync3()])
.then(function(results){
    console.log(results);
});

Promise.all(),接收一个数组作为参数，数组里的元素最终都返回一个Promise对象。这样，三个异步的操作就并行执行了，等到他们都执行完以后，才会进入到then里边，那么三个异步操作执行以后返回的数据哪里去了呢？ all会把所有异步操作的结果放进一个数组，并且把数组传递给then,就是上边的results.
所以上边代码输出的结果是：

有了all方法，你就可以并行执行多个异步操作，并且在一个回调中处理所有的返回数据，有一个场景很适合用这个方法。
比如一些游戏类的素材比较多的应用，打开网页时预先加载，需要用到各种资源，比如图片，flash,以及各种静态文件。所有都加载完以后，再进行页面的初始化。

race的用法
Promise.all方法，实际上是谁跑的慢，以谁为准执行回调。那么相对的就有另外一个方法，以谁跑的块，以谁为准执行回调。
就是race方法，这个词本来就是赛跑的意思。race的用法与all一样。我们修改下上边的计时器的时间：

function runAsync1(){
    var p = new Promise(function(resolve, reject){
        //做一些异步操作
        setTimeout(function(){
            console.log('异步执行1完成');
            resolve('随便什么数据1');
        }, 1000);
    });
    return p;            
}
function runAsync2(){
    var p = new Promise(function(resolve, reject){
        //做一些异步操作
        setTimeout(function(){
            console.log('异步执行2完成');
            resolve('随便什么数据2');
        }, 3000);
    });
    return p;            
}
function runAsync3(){
    var p = new Promise(function(resolve, reject){
        //做一些异步操作
        setTimeout(function(){
            console.log('异步执行3完成');
            resolve('随便什么数据3');
        }, 2000);
    });
    return p;            
}
Promise
.race(runAsync1(),runAsync2(),runAsync3())
.then(function(results){
  console.log(results);
})

//1秒后打印
"异步执行1完成"
//再过1秒后打印
"异步执行3完成"
//再过2秒后打印
"异步执行2完成"

这个race有什么用呢？使用场景还是很多的，比如我们可以用race给某个异步请求设置超时时间，并且在超时后执行相应的操作，代码如下：

//请求某个图片资源
function requestImg(){
    var p = new Promise(function(resolve, reject){
        var img = new Image();
        img.onload = function(){
            resolve(img);
        }
        img.src = 'xxxxxx';
    });
    return p;
}
 
//延时函数，用于给请求计时
function timeout(){
    var p = new Promise(function(resolve, reject){
        setTimeout(function(){
            reject('图片请求超时');
        }, 5000);
    });
    return p;
}
 
Promise
.race([requestImg(), timeout()])
.then(function(results){
    console.log(results);
})
.catch(function(reason){
    console.log(reason);
});

requestImg函数会异步请求一张图片，我把地址写为"xxxxxx"，所以肯定是无法成功请求到的。timeout函数是一个延时5秒的异步操作。我们把这两个返回Promise对象的函数放进race，于是他俩就会赛跑，如果5秒之内图片请求成功了，那么遍进入then方法，执行正常的流程。如果5秒钟图片还未成功返回，那么timeout就跑赢了，则进入catch，报出“图片请求超时”的信息。运行结果如下：

image.png

作者：泡杯感冒灵
链接：https://www.jianshu.com/p/458db9587772