一、起因

在js嵌套调用多层js方法，代码看上去很头疼，尤其是ajax请求，收到异步结果以后在去调用其他方法这种情况，从代码阅读性上来说很乱，如下：

function load() {
    $.ajax({
        url: 'xxx.com',
        data: 'jsonp',
        success: function(res) {
            fn1(11, function() {
                console.log('this is a callback')
            })
        }
    }
}
// 当参数a大于10且参数fn2是一个方法时 执行fn2
function fn1(a, fn2) {
    if (a > 10 && typeof fn2 == 'function') {
        fn2()
    }
}

load();

这样的代码看层级少了当然还是可以凑合看的，但是多起来的话，那就难以维护了，无论是开发者自身还是同事来接手项目，都是极其无奈的！这时候我们的promise就应运而生、粉墨登场了

promise是用来解决两个问题的：

回调地狱，代码难以维护，常常第一个的函数的输出是第二个函数的输入这种现象
promise可以支持多个并发的请求，获取并发请求中的数据

二、es6 promise用法

Promise是一个构造函数，自己身上有all、reject、resolve这几个眼熟的方法，原型上有then、catch等同样很眼熟的方法。

那就new一个

let p = new Promise((resolve, reject) => {
    //做一些异步操作
    setTimeout(() => {
        console.log('执行完成');
        resolve('我是成功！！');
    }, 2000);
});

Promise的构造函数接收一个参数：函数，并且这个函数需要传入两个参数：

resolve ：异步操作执行成功后的回调函数
reject：异步操作执行失败后的回调函数

上面描述的两个参数会产生误解，并不是你在new Promise的时候传入两个方法对象，而是在下面使用的时候通过then、catch传入两个箭头函数（参数） => {过程}

resolve、reject的用法 :

把Promise的状态置为rejected，这样我们在then中就能捕捉到，然后执行“失败”情况的回调。看下面的代码。

    let p = new Promise((resolve, reject) => {
        //做一些异步操作
      setTimeout(function(){
            var num = Math.ceil(Math.random()*10); //生成1-10的随机数
            if(num<=5){
                resolve(num);
            }
            else{
                reject('数字太大了');
            }
      }, 2000);
    });
    p.then((data) => {
            console.log('resolved',data);
        },(err) => {
            console.log('rejected',err);
        }
    );

then中传了两个箭头函数，then方法可以接受两个参数，

第一个对应resolve的回调，(data) => { console.log('resolved',data); }
第二个对应reject的回调，(err) => { console.log('rejected',err); }。

所以我们能够分别拿到他们传过来的数据。data可以获取resolve传过来的num，err可以获取reject传过来的“数字太大”，因此执行结果是：


>"===" 
>"rejected" "数字太大了"

或者

>"===" 
>"resolved" 1

catch的用法

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

let p = new Promise((resolve, reject) => {
        //做一些异步操作
      setTimeout(function(){
            var num = Math.ceil(Math.random()*10); //生成1-10的随机数
            if(num<=5){
                resolve(num);
            }
            else{
                reject('数字太大了');
            }
      }, 2000);
    });

console.log("===");

p.then((data) => {
    console.log('resolved',data);
})
.catch((err) => {
    console.log('catch',err);
});

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

p.then((data) => {
    console.log('resolved',data);
    console.log(somedata); //此处的somedata未定义
})
.catch((err) => {
    console.log('catch',err);
});

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

> "===" 
> "resolved" 4 
> "catch" ReferenceError: somedata is not defined
或者
> "===" 
> "catch" "数字太大了"

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

Promise.all和Promise.race

Promise.all和Promise.race有点类似

all是Promise的状态都为成功才表示成功

race是Promise的状态是有一个先成功的状态了，就表示成功

axios其实就是调用了Promise，写法也是很相似的

由于它是第三方包，需要npm i axios安装一下

// 发个get请求
axios.get('user/', {
    id,
    username
}).then(res => {
    console.log(res);   // 成功
}).catch(err => {
    console.log(err);   // 失败
});

// 再来个post请求
axios.post('login/', {
    username,
    password
}).then(res => {
    console.log(res);   // 成功
}).catch(err => {
    console.log(err);   // 失败
});

// 也有all的操作
function getUser() {
    return axios.get('/user');
}

function sendMsg() {
    return axios.post('/info', {msg});
}

axios.all([getUser(), sendMsg()]).then(res => {})

总结一下：Promise常用的就是这些了，then返回的也是一个Promise对象，所以可以继续调用.then方法。有说的不对的地方，还望指出。

为什么要使用promise

一、起因

二、es6 promise用法

resolve、reject的用法 :

catch的用法

Promise.all和Promise.race