资讯专栏INFORMATION COLUMN

ES6系列文章 Promise

thekingisalwaysluc / 1096人阅读

摘要:已成功,内部执行了方法,实例处于状态,状态不可改变了。实际上是函数的一种简写形式,当执行后,可以被的回调函数接收处理。该语句并未执行若内部发生错误,会被自动的执行。静态函数返回一个成功的对象,静态函数返回一个拒绝状态的对象。

视频讲解

ES6的 Promise 是个啥哩?,是个承诺。为了解决 js 回调地狱。Promise 给我的体会是: 开始云里雾里,然后越用越好用。今天才明白承诺是什么意思?比如我自己的承诺,如果减肥成功就买个iphone,如果减肥失败就去死~,哈哈然而我并不会。

基本语法
new Promise((resolve, reject) => {
    // ...
});

resolve, reject 方法由 js 引擎提供,不需要个人编写。

Promise 的三种状态

pending (进行中), 执行了 new Promise() 命令后,promise实例就处于 pending 的状态。

fullfilled(已成功),promise 内部执行了 resolve 方法,promise实例处于fullfilled状态,状态不可改变了。

rejected(已失败), promise 内部执行了reject 方法,promise 实例处于rejected状态,同样不可更改。

Promise.prototype 方法 then和catch
new Promise((resolve, reject) => {
    setTimeout(() => {
        resolve("hello resolve");
    }, 500);
})
.then(val => {
    console.log(val);// hello resolve
}, err => {
    console.error(err);// 该条语句不被执行
});

then最多有两个参数,参数一为 resolve 后回调的函数,参数二为 reject 后的回调函数。then也可以只接收参数一。

new Promise((resolve, reject) => {
   setTimeout(() => {
       reject("hello reject");
   }, 500);
})
.then(val => {
   console.log(val);
}, err => {
   console.error(err);// hello reject
});

catch实际上是 then 函数的一种简写形式,当执行 reject 后,可以被catch 的回调函数接收处理。

new Promise((resolve, reject) => {
    setTimeout(() => {
        reject("hello reject");
    }, 500);
})
.catch(err => {
    console.log(err); // hello reject
});
再谈谈 Promise 对象的异常处理

在 promise 内部发生错误后不会被外层环境捕捉到。

try {
    new Promise((resolve, reject) => {
        console.log(e);
    });
} catch(e) {
    console.log("error is catched? ", e);// 该语句并未执行
}

若 promise 内部发生错误,会被自动的执行reject。

new Promise((resolve, reject) => {
    console.log(e);
})
.catch(err => {
    console.log("error be rejected?", err);// error be rejected? ReferenceError: e is not defined
});
再来看看promise的链式调用吧
let p = new Promise((resolve, reject) => {
    resolve("i am resolved");
})
.then(val => {
    return val;
});
console.log(p);// Promise {[[PromiseStatus]]: "pending", [[PromiseValue]]: undefined}

在 then 中 return 的值又变成了 promise对象。

p.then(val => {
    console.log(val);// i am resolved
});

这个也为链式调用提供了基础。

Promise 的静态方法 all race resolve reject all

all静态方法接收promise 对象的数组,并返回一个 promise 对象。当数组中的所有元素都 resolve 时,结果promise被 resolve。若数组中有一个对象被 reject 了,结果promise对象被reject。本人经常使用 all方法来处理多个 ajax 请求获取数据的界面loading 效果。

let isLoading = true;
let p1 = fetch(url1).then(json => {
    // ....
});
let p2 = fetch(url2).then(json => {
    // ...
});
let p3 = fetch(url3).then(json => {
    // ...
});
Promise.all([p1, p2, p3]).then(() => {
    isLoading = false;
});
race

同样接收一个数组,结果也是一个 promise 对象,当数组中的promise 对象有一个的状态改变时,race方法的结果promise对象变为相同的状态。具体应用场景笔者还没有遇到过。若有人遇到过,请在下面留言告知一下,感激不尽。

resolve、reject

静态函数Promise.resolve返回一个成功的promise对象,静态函数Promise.reject返回一个拒绝状态的 promise 对象。

refs

MDN Promise

【开发环境推荐】Cloud Studio 是基于浏览器的集成式开发环境,支持绝大部分编程语言,包括 HTML5、PHP、Python、Java、Ruby、C/C++、.NET 小程序等等,无需下载安装程序,一键切换开发环境。 Cloud Studio提供了完整的 Linux 环境,并且支持自定义域名指向,动态计算资源调整,可以完成各种应用的开发编译与部署。

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

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

相关文章

  • ES6系列文章 异步神器async-await

    摘要:有两个陌生的关键字,同时函数执行结果似乎返回了一个对象。用来表示函数是异步的,定义的函数会返回一个对象,可以使用方法添加回调函数。如果的是对象会造成异步函数停止执行并且等待的解决如果等的是正常的表达式则立即执行。 视频讲解 关于异步处理,ES5的回调使我们陷入地狱,ES6的Promise使我们脱离魔障,终于、ES7的async-await带我们走向光明。今天就来学习一下 async-a...

    miqt 评论0 收藏0
  • JS笔记

    摘要:从最开始的到封装后的都在试图解决异步编程过程中的问题。为了让编程更美好,我们就需要引入来降低异步编程的复杂性。异步编程入门的全称是前端经典面试题从输入到页面加载发生了什么这是一篇开发的科普类文章,涉及到优化等多个方面。 TypeScript 入门教程 从 JavaScript 程序员的角度总结思考,循序渐进的理解 TypeScript。 网络基础知识之 HTTP 协议 详细介绍 HTT...

    rottengeek 评论0 收藏0
  • JavaScript 异步

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

    tuniutech 评论0 收藏0
  • ES6-7

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

    mudiyouyou 评论0 收藏0
  • ES6 系列之 Babel 将 Async 编译成了什么样子

    摘要:大约后输出我们直接在官网的粘贴上述代码,然后查看代码编译成什么样子相关的代码我们在系列之将编译成了什么样子中已经介绍过了,这次我们重点来看看函数以上这段代码主要是用来实现的自动执行以及返回。 前言 本文就是简单介绍下 Async 语法编译后的代码。 Async const fetchData = (data) => new Promise((resolve) => setTimeout...

    wangym 评论0 收藏0

发表评论

0条评论

thekingisalwaysluc

|高级讲师

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<