码迷,mamicode.com
首页 > 其他好文 > 详细

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

时间:2018-07-02 20:12:48      阅读:175      评论:0      收藏:0      [点我收藏+]

标签:cal   class   一个   编写   ajax   copy   分享   ISE   catch   

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等其他方法。

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

标签:cal   class   一个   编写   ajax   copy   分享   ISE   catch   

原文地址:https://www.cnblogs.com/panyujun/p/9255330.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!