[vue日志]为什么要用promise

起因

大家都知道做前端开发最让人头痛的就是处理异步请求的情况，在请求到的成功回调函数里继续写函数，长此以往形成了回调地狱。

function load() {
    $.ajax({
        url: 'xxx.com',
        data: 'jsonp',
        success: function(res) {
            init(res, function(res) {
                render(res, function(res) {
                    // 一层一层又一层
                });
            });
        }
    }
}
 
load();

这样的代码层级少当然还是可以凑合看的，但是多起来的话，就难以维护了，无论是开发者自身还是同事来接手项目，都是极其无奈的！还要我怎样，要怎样，怎样，样。

于是乎 出现了Promise

当年在听到关于Promise的报道的时候没有太多关注，只知道是解决回调地狱问题的，一种异步请求解决方案。 后来在工作当中发现JQ也实现了相关的方法，上代码

$.get('xxx.php').done(function() {
    alert('成功的回调');    // 相当于Promise的resolve()
});

现在看来，真的和Promise差不多呢。那么我们回到今天的主角来

先介绍一下Promise的三种状态：

• Pending 进行中
• Fulfilled 已成功
• Rejected 已失败

说完了状态直接上代码，我们得会用才行：

还以上面load函数的例子

// then方法是用的最多的了
  // 按照then来执行成功和失败的回调函数
  function load() {
    return new Promise((resovel, reject) => {
        $.ajax({
            url: 'xxx.com',
            data: 'jsonp',
            success: function(res) {
                resolve(res);
            },
            error: function(err) {
                reject(err);
            }
        });
    });
}
 
// 用一下
load().then(data => {
    console.log(data);  // 请求到的数据
    console.log('请求数据成功');
}, err => {
    console.log('请求失败');
});

除了处理请求，Promise还可以写在普通的函数中

function init(options) {
    return new Promise((resolve, reject) => {
        if (options.id) {
            console.log('你是唯一')
            resolve(options.id);
        } else {
            console.log('不行，不行');
            reject()
        }
    });
}
 
init({id: 110})
    .then(id => {
        console.log(id);          // 110
        let obj = {id, nickname: '左夕'};
        return obj;
    })
    .then(other => {
        console.log(other);    // { id: 110, nickname: '左夕' }
    });

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方法。