ES6的Promise

最新推荐文章于 2024-10-29 20:22:44 发布

jojo付啾啾

最新推荐文章于 2024-10-29 20:22:44 发布

阅读量199

点赞数

CC 4.0 BY-SA版权

分类专栏： JS 文章标签： ES6的Promise

本文链接：https://blog.youkuaiyun.com/DreamFJ/article/details/81564832

JS 专栏收录该内容

116 篇文章

订阅专栏

1.异步操作的常用语法

事件监听与响应

document.getElementById('start').addEventListener('click',start,false);

function start(){
    // 响应事件，进行相应的操作
}

回调

// 比较常见的有ajax
$.ajax('http://baidu.com',{
    success: function(res){
        //这里就是回调函数了
    }
})；


// 或者在页面加载完毕后回调
$(function(){
    // 这里也是回调函数
});

浏览器中的js的异步操作以事件(onload,ready......)为主，回调主要出现在ajax请求和File API。此时问题还不严重。但是，，有了Node.js之后，对异步的依赖进一步加剧了......因为无阻塞高并发是Node.js的招牌，而要做到无阻塞高并发就靠异步操作；Node.js很多操作都是依赖系统函数来进行的，所以需要回调函数来进行后续操作。

2.异步回调问题

无法正常使用return和throw
无法正常检索堆栈信息
多个回调之间难以建立联系

3.Promise是什么？

从用途上来讲
- 主要用于异步计算；
- 可以将异步操作队列化，按照期望的顺序执行，返回符合预期的结果；
- 可以在对象之间传递和操作Promise，帮助我们处理队列。

4.Promise简介

new Promise(
    // 执行器executor
    function(resolve,reject){
        // 一段耗时很长的异步操作
        
        resolve(); // 数据处理完成

        reject(); // 数据处理出错
    }
).then(function A(){
    // 成功，下一步
}, function B(){
    // 失败，做相应处理
});

Promise是一个代理对象，它和原先要进行的操作并无关系，我们只是把原先的操作放在了执行器里面；通过引入一个回调，避免更多的回调。

5.Promise3个状态

pending [待定]初始状态
fulfilled [实现]操作成功
rejected [被否决]操作失败

Promise状态发生改变，就会触发.then()里的响应函数处理后续步骤；Promise状态一经改变，不会再变。

6.简单实例

console.log('here we go');
new Promise(resolve=>{
    setTimeout(()=>{
        resolve('hello');
    },2000);
}).then(value=>{
    console.log(value + 'world');
});

// 输出
// here we go
// hello world

console.log('here we go');
new Promise(resolve=>{
    setTimeout(()=>{
        resolve('hello');
    },2000);
}).then(value=>{
    console.log(value);
    return new Promise(resolve=>{
        setTimeout(()=>{
            resolve('world');
        },2000);
    })
}).then(value=>{
    console.log(value + 'world');
});

// 输出
// here we go
// hello
// world world