Promise用法详解

首先，Promise是一个对象，有then()方法的对象。
then()的入参是一个函数，通常在promise链中，入参是一个返回promise的函数，即入参是一个函数，这个函数会return 一个promise对象。

1. 基本用法

var p = new Promise(function(resolve,reject){
    console.log(1);
    setTimeout(function(){
        console.log('执行完成');
        resolve("success");    //若此处不调用，则不会进入then方法
    },200)
}).then(function(data){
    console.log(data);  //"success"
});

2. 完整用法

function getNumber(){
    var p = new Promise(function(resolve,reject){
        var num = Math.ceil(Math.random()*10);
        if(num<5){
            resolve(num);
        }else{
            reject('数字大于5');
        }
    });
    return p;
}
getNumber().then(function(data){
    console.log(data)     //3
}, function(data){
    console.log(data)   //数字大于5
});

3. 链式操作用法

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');
        }, 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);
});
//执行结果：
异步任务1执行完成
随便什么数据1
异步任务2执行完成
随便什么数据2
异步任务3执行完成
随便什么数据3

4. catch用法

//getNumber()为上述函数
getNumber()
.then(function(data){
    console.log('resolved');
    console.log(data);
    console.log(somedata); //此处的somedata未定义
})
.catch(function(reason){
    console.log('rejected');
    console.log(reason);
});
//当num<5时会输出：
resolved
3
rejected
ReferenceError: somedata is not defined

所以catch的效果和写在then的第二个参数里面一样。不过它还有另外一个作用：在promise执行中，或者执行resolve的回调（也就是上面then中的第一个参数）时，如果抛出异常了（代码出错了），那么并不会报错卡死js，而是会进到这个catch方法中。
then 的第二个参数和使用 catch 的区别：

• then的第一个函数里抛出了异常，catch能捕获到，then的第二个函数获取不到。
• catch 并不会报错卡死js，而是会进入到catch方法里。

5. all的用法

//使用上面定义的三个函数
Promise
.all([runAsync1(), runAsync2(), runAsync3()])
.then(function(results){
    console.log(results);
});
//执行结果
异步任务1执行完成
异步任务2执行完成
异步任务3执行完成
 ["随便什么数据1", "随便什么数据2", "随便什么数据3"]

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

6. 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);
});

7. 如何破坏promise链：
   如果有这样一个promise链：

//then()里面传的是一个返回promise对象的函数
p1().then(p2).then(p3)
    .then((data)=>{
      console.log('data: ' + data); 
    })
    .catch((error)=>{
      console.log('error: ' + error);
    });

function p1(){
  return new Promise((resolve, reject)=>{
    console.log('p1 resolved');
    resolve(111);
  });
}

function p2(){
  return new Promise((resolve, reject)=>{
    console.log('p2 rejected');
    reject('222');
  })
}

function p3(){
  return new Promise((resolve,reject)=>{
    console.log('p3 resolved');
    resolve(333);
  })
}
//p1 resolved
//p2 rejected
//error: 222

然后再看下面：

var p1 = new Promise((resolve,reject)=>{
  console.log('p1 resolved');
  resolve(111);
});

var p2 = new Promise((resolve,reject)=>{
  console.log('p2 rejected');
  reject(222);
});

var p3 = new Promise((resolve,reject)=>{
  console.log('p3 resolved');
 // resolve(333);
});

p1.then(function(){
  return p2;
}).then(function(){
  return p3;
}).catch((error)=>{
  console.log('error: ' + error)
})
p1 resolved
p2 rejected
p3 resolved
error: 222

参考文章：https://www.cnblogs.com/whybxy/p/7645578.html