记录一下es6的promise的基本用法

Posted 2020-11-21 panyujun

es6出来了很多好用的新语法，promise算是比较火的。

promise是解决异步编程的一种方案。。。啥意思呢，我理解的是：

执行异步代码的时候（回调函数，接口请求等），你不知道他们什么时候会返回，所以你需要在他们的回调中写需要走的逻辑。当你在第一层异步调用后用返回回来的数据去再次异步，就像俄罗斯套娃一样一层一层的嵌套下去（不是说所有的场景，只是某些需要嵌套调用的场景）。

这样功能上肯定是没有什么问题的，但是代码就不好阅读和维护。

promise可以解决嵌套，让你的代码看上去就像是同步的一样（只是看上去，本质还是异步）。

1、首先我们new 一个promise对象

var p1 = new Promise(function (resolve，reject) {
    setTimeout(() => {
        console.info(‘我是p1中运行的代码‘);
        resolve(‘我在p1中的then中执行‘)
    }, 1000)
});

p1.then(function (data) {
    console.info(data);
},function(err){});

代码可以直接copy到console中运行，1秒后输出‘我是p1中运行的代码’ 紧接着输出‘我在p1中的then中执行’两行文字。

从代码结构上来看，是同步代码的编写方式，并没有嵌套callback，但是then中的方法是在promise中的方法调用后被运行的。

promise中的参数是一个function，并且直接被运行了。

new一个promise对象需要传入一个方法作为参数，该方法有两个参数，resolve和reject。

resolve函数的作用是，当Promise对象的状态从“未完成”变为“成功”（即从 pending 变为 resolved），在异步操作成功时调用，并将异步操作的结果，作为参数传递出去（一般我会理解为当promise中的异步执行成功时，执行的方法，这样初学会比较好理解（并不准确），promise的原理其实是通过状态变化来控制调用resolve还是reject）。
reject函数的作用是，当Promise对象的状态从“未完成”变为“失败”（即从 pending 变为 rejected），在异步操作失败时调用，并将异步操作报出的错误，作为参数传递出去。

 

2、修改then的调用时间

var p1 = new Promise(function (resolve,reject) {
    setTimeout(() => {
        console.info(‘我是p1中运行的代码‘);
        resolve(‘我在p1中的then中执行‘)
    }, 1000)
});
setTimeout(() => {
    p1.then(function (data) {
        console.info(data);
    },function(err){});
}, 2000)

观察一下和上面的代码有什么不同（then在2秒后被调用，promise在1秒后被调用）。执行promise的时候并没有马上去执行then中的方法。当2秒后调用then的时候返回了异步调用的结果（就好像把异步结果存起来，当你需要使用它的时候再拿出来一样）。要理解这个，就需要理解promise的状态变化。（下次我会记录一篇promise的简单实现）。

3、then中返回Promise对象

var p1 = new Promise(function (resolve,reject) {
    setTimeout(() => {
        console.info(‘我是p1中运行的代码‘);
        resolve(‘我在p1中的then中执行‘);

    }, 1000)
});
p1.then(function (data) {
    console.info(data);
    return new Promise(function (resolve, reject) {
        setTimeout(() => {
            console.info(‘我是嵌套的promise‘);
            resolve(‘我是嵌套的promise中的then‘);
        })

    });
}, function (err) {}).then(function (data) {
    console.info(data);
}, function (err) {});

promise的链式调用是使用then来实现的，对于多层嵌套的ajax，就非常好用了。

4、配合ajax使用

var p1 = new Promise(function (resolve,reject) {
    $.ajax({
        url: url,
        method: ‘get‘,
        success: function (data) {
            resolve(data);
        },
        error: function (xhr, statusText) {
            reject(statusText);
        }
    });
});
p1.then(function (data) {
    console.info(data);
    return new Promise(function (resolve, reject) {
        $.ajax({
            url: url,
            method: ‘get‘,
            success: function (data) {
                resolve(data);
            },
            error: function (xhr, statusText) {
                reject(statusText);
            }
        });

    });
}, function (err) {}).then(function (data) {
    console.info(data);
}, function (err) {});

 

这些只是promise的最基本的用法，当然它还有catch，all，race等其他方法。