js异步对象Promise

最新推荐文章于 2024-07-28 21:06:01 发布

左直拳

最新推荐文章于 2024-07-28 21:06:01 发布

阅读量359

点赞数

分类专栏： JavaScript 文章标签： js Promise 异步

本文链接：https://blog.csdn.net/leftfist/article/details/108605902

版权

JavaScript 专栏收录该内容

168 篇文章 6 订阅

订阅专栏

此前我对js中的异步机制，只有一点粗浅的认识，只知道有2种机制：
1）回调函数
2）定时器模拟

回调函数好理解，系统自带的，执行完指定函数后，才会执行回调函数。这个概念很容易理解，深入我心。

可是，如果没有回调函数怎么办？一般来说，系统都是在事件里面提供回调函数的，但我们写代码的时候，并非全部都是事件。

有一个办法就是用定时器进行模拟。在定时触发的事件中，检查我们监控的状态，发现不满足，继续定时触发，直到条件满足才退出。示例：

var timer = setInterval(function () {
    if (iMap == null) return;//地图尚未加载完毕，继续等待
    clearInterval(timer);//条件已满足，清除定时器
    ....//做你想做的
}, 1000);

现在，有了第三种方案：Promise。

Promise，诺言。有道是君子一诺，死马难追。将相关代码放在Promise里，它一直执行完才开启下一步：then。

var promise = new Promise(function(resolve,reject){//resolve,reject是两个系统函数，对应成功和失败
    var t = setTimeout(function(){//为容易看出效果，来一个2秒钟的定时器
        resolve('hello world!');//执行resolve函数，成功返回
    },2000);
    console.log("this is promise!");
}).then(function(hi){//执行下一步
	console.log(hi);
    console.log(' hello china!');
});

//执行顺序：
this is promise!
hello world!
hello china!

Promise的作用，就是保证某一步骤完成，才开启下一步。这在实际编程中能派上大用场。因为许多时候，我们需要强调一定要完成。。。，然后才能。。。而这种强调先后顺序的链式步骤，并不是说函数A放在函数B前面，就意味着函数B开始执行的时候，函数A已经执行完，因为函数A有可能有一些耗时的，异步操作。

靠函数位置的先后，并不能保证函数A 执行完毕才执行函数B。

//靠函数位置的先后，并不能保证 函数A 执行完毕才执行 函数B。
函数A();
函数B();

只有这样，才能保证函数AB的先后顺序：

var promise = new Promise(function(resolve,reject){
	resolve(函数A());//函数A不一定要返回值
	/*  
		不能写成以下样子，否则起不到异步的作用。
		函数A();
		resolve();
	*/
}).then(function(){
	函数B();
});

比如说

function a(){//函数A
    console.log("hello world!");
}
var promise = new Promise(function(resolve,reject){
    resolve(a());//注意a()并没有返回值
}).then(function(){
    console.log('hello china!');//函数B
});
console.log('hello promise');//函数C

输出结果：
hello world! //函数A
hello promise!//函数C
hello china!//函数B

IE并不支持Promise。IE就是个怪物。不过，由于它神经质的报错机制，有时可以用于测试程序是否足够严谨。反正我们现在开发WEB项目，是越来越不考虑IE是否支持的问题了。既然如此，用lambda表达式也没有啥问题了，因为IE同样不支持lambda。

function a(){//函数A
    console.log("hello world!");
}
var promise = new Promise((resolve,reject) => {
    resolve(a());//注意a()并没有返回值
}).then(() => {
    console.log('hello china!');//函数B
});
console.log('hello promise');//函数C