【Promise】ES6 Promise的使用

AlphaGooo 发布于2019-08-23 18:26 / 1669人阅读

摘要：首先，我们为什么要用语法作为替代回调函数执行，作为异步操作的处理方法之一，是解决异步执行时候回调函数嵌套回调函数这一问题的方法，它更简洁地控制函数执行流程一般有三种状态等待态，成功态，失败态常见写法为通常，我们处理异步请求，会使用回调函数嵌

首先，我们为什么要用Promise语法？
Promise作为替代回调函数执行，作为异步操作的处理方法之一，是解决JS异步执行时候回调函数嵌套回调函数这一问题的方法，它更简洁地控制函数执行流程

一般promise有三种状态：pending(等待态)，fulfiled(成功态)，rejected(失败态)；

常见写法为：

let p =  new Promise(resolve, reject){}.then（）；

通常，我们处理异步请求，会使用回调函数嵌套回调函数
例如：

fn("a", function(a) {
    fn1("b", function(b) {
        fn2("c", function(c) {
            fn3("d", function(d) {
                alert("回调成功，结果为："a+b+c+d")
            })
        })
    })
})

但我们发现这样写的代码可读性并不高

如果使用promise语法，则更加符合阅读习惯，只需要在then函数中写处理逻辑即可

new Promise(function(resolve , reject) {
    resolve(1);
}).then(function(val) {
    console.log(val);
    return new Promise(function(resolve , reject) {
        resolve(2);
    });
}).then(function(val) {
    console.log(val);
    return new Promise(function(resolve , reject) {
        resolve(3);
    });
}).then(function(val) {
    console.log(val);
    return new Promise(function(resolve , reject) {
        resolve(4);
    });
}).then(function(val) {
    console.log(val);
});

运行结果为：

接下来模拟在实际项目开发中，在异步请求完数据后处理数据的情况，我们在这里用settimeout来模拟异步请求

let mypromise = new Promise(function(resolve, reject){
    setTimeout(function(){
        resolve("成功!"); 
    }, 1000);
});
mypromise.then(function(successMessage){
    console.log(successMessage);
});

运行结果为:

我们可以看到这里的“成功！”在运行一秒后执行

常用API
(1) new Promise

new Promise(function(resolve, reject){
});

(2) PromiseObj.then(resolveFn,rejectFn)
resolveFn：Promise对象成功的回调处理函数
rejectFn：Promise对象失败的回调处理函数

new Promise((resolve,reject)=>{

}).then((resolveData)=>{

},(rejectErr)=>{
    
})

(3) PromiseObj.catch()

new Promise((resolve,reject)=>{

}).catch(err=>{
    console.log(err)
})

（4）PromiseObj.resolve()

Promise.resolve(123).then(data=>{
    console.log(data)
})

服务器托管云服务器 es6中的promise Promise使用 promise promise用法

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/105213.html

ES6-7

摘要：的翻译文档由的维护很多人说，阮老师已经有一本关于的书了入门，觉得看看这本书就足够了。前端的异步解决方案之和异步编程模式在前端开发过程中，显得越来越重要。为了让编程更美好，我们就需要引入来降低异步编程的复杂性。 JavaScript Promise 迷你书（中文版）超详细介绍promise的gitbook，看完再不会promise...... 本书的目的是以目前还在制定中的ECMASc...

mudiyouyou 2019-08-21 18:40 评论0 收藏0
通过 ES6 Promise 和 jQuery Deferred 的异同学习 Promise

摘要：和和都有和，但是略有不同。实际上返回的是一个对象。和添加的回调，添加的回调。所以在调用成功的情况下执行添加的回调，调用失败时执行添加的回调。，产生对象并，产生对象并，然后继续处理，的语法糖，和的差不多但不同。 Deferred 和 Promise ES6 和 jQuery 都有 Deffered 和 Promise，但是略有不同。不过它们的作用可以简单的用两句话来描述 Deffere...

Yujiaao 2019-08-21 10:39 评论0 收藏0
JavaScript 异步

摘要：从最开始的到封装后的都在试图解决异步编程过程中的问题。为了让编程更美好，我们就需要引入来降低异步编程的复杂性。写一个符合规范并可配合使用的写一个符合规范并可配合使用的理解的工作原理采用回调函数来处理异步编程。 JavaScript怎么使用循环代替(异步)递归问题描述在开发过程中，遇到一个需求：在系统初始化时通过http获取一个第三方服务器端的列表，第三方服务器提供了一个接口，可通过...

tuniutech 2019-08-21 18:34 评论0 收藏0
es6 - Promise

摘要：所谓异步编程中的异步是相对于同步的概念的。是一系列异步编程规范的统称。如果中的回调函数返回一个值，那么返回的将会成为接受状态，并且将返回的值作为接受状态的回调函数的参数值。参考介绍基础篇深入理解与异步编程。 es6 promise与异步编程对于一些还不具备大量编程经验的朋友来说，promise可能是es6比较难以掌握的点。首先是很多名词，比如Promises，es6 Promise,...

wemallshop 2019-08-22 15:11 评论0 收藏0
浅谈ES6原生Promise

摘要：如果有错误，则到的第二个回调函数中，对错误进行处理。假设第一个的第一个回调没有返回一个对象，那么第二个的调用者还是原来的对象，只不过其的值变成了第一个中第一个回调函数的返回值。 ES6标准出炉之前，一个幽灵，回调的幽灵，游荡在JavaScript世界。正所谓：世界本没有回调，写的人多了，也就有了})})})})})。 Promise的兴起，是因为异步方法调用中，往往会出现回调函数一...

yedf 2019-08-20 10:30 评论0 收藏0
ES6 Promise：模式与反模式

摘要：尽管可以让代码更加简洁易读，但对于只熟悉回调函数的人来说，可能对此还是会有所怀疑。始终避免在或使用回调函数，否则会吞噬任何后续的错误，将其作为链的一部分。然而，使用回调函数，使用所谓的，即第一个参数是一个错误回调变得很常见。原文：ES6 Promises: Patterns and Anti-Patterns作者：Bobby Brennan 当几年前，第一次使用 NodeJS 的时候...

djfml 2019-08-21 16:49 评论0 收藏0