前言
今天开始和大家一起系统的学习ES6+,每天3分钟，用一把斗地主的时间，重学ES6+，今天介绍的是ES6中新增的内容Promise
异步任务的处理
- 在ES6出来之后，有很多关于Promise的讲解、文章，也有很多经典的书籍讲解Promise
- 虽然等你学会Promise之后，会觉得Promise不过如此，但是在初次接触的时候都会觉得这个东西不好理解;
- 那么这里我从一个实际的例子来作为切入点:
- 我们调用一个函数，这个函数中发送网络请求(我们可以用定时器来模拟);
- 如果发送网络请求成功了，那么告知调用者发送成功，并且将相关数据返回过去;
- 如果发送网络请求失败了，那么告知调用者发送失败，并且告知错误信息;
代码演示
/** * 这种回调的方式有很多的弊端: * 1> 如果是我们自己封装的requestData,那么我们在封装的时候必须要自己设计好callback名称, 并且使用好 * 2> 如果我们使用的是别人封装的requestData或者一些第三方库, 那么我们必须去看别人的源码或者文档, 才知道它这个函数需要怎么去获取到结果 */ // request.js function requestData(url, successCallback, failtureCallback) { // 模拟网络请求 setTimeout(() => { // 拿到请求的结果 // url传入的是yz, 请求成功 if (url === "yz") { // 成功 let names = ["abc", "cba", "nba"] successCallback(names) } else { // 否则请求失败 // 失败 let errMessage = "请求失败, url错误" failtureCallback(errMessage) } }, 3000); } // main.js requestData("kobe", (res) => { console.log(res) }, (err) => { console.log(err) })
什么是Promise呢？
- 在上面的解决方案中，我们确确实实可以解决请求函数得到结果之后，获取到对应的回调，但是它存在两个主要的问题:
- 第一，我们需要自己来设计回调函数、回调函数的名称、回调函数的使用等;
- 第二，对于不同的人、不同的框架设计出来的方案是不同的，那么我们必须耐心去看别人的源码或者文档，以便可以理解它这个函数到底怎么用;
- 我们来看一下Promise的API是怎么样的:
- Promise是一个类，可以翻译成 承诺、许诺 、期约;
- 当我们需要给予调用者一个承诺:待会儿我会给你回调数据时，就可以创建一个Promise的对象;
- 在通过new创建Promise对象时，我们需要传入一个回调函数，我们称之为executor;
- 这个回调函数会被立即执行，并且给传入另外两个回调函数resolve、reject;
- 当我们调用resolve回调函数时，会执行Promise对象的then方法传入的回调函数;
- 当我们调用reject回调函数时，会执行Promise对象的catch方法传入的回调函数;
Promsise 代码结构
我们来看一下Promise代码结构: 下面Promise使用过程，我们可以将它划分成三个状态:
- 待定(pending): 初始状态，既没有被兑现，也没有被拒绝;
- 当执行executor中的代码时，处于该状态;
- 已兑现(fulfilled): 意味着操作成功完成;
- 执行了resolve时，处于该状态;
- 已拒绝(rejected): 意味着操作失败;
- 执行了reject时，处于该状态;
function foo() { // Promise return new Promise((resolve, reject) => { resolve("success message") // reject("failture message") }) } const fooPromise = foo() // then方法传入的回调函数两个回调函数: // > 第一个回调函数, 会在Promise执行resolve函数时, 被回调 // > 第二个回调函数, 会在Promise执行reject函数时, 被回调 fooPromise.then((res) => { console.log(res) }, (err) => { console.log(err) }) //catch方法传入的回调函数, 会在Promise执行reject函数时, 被回调 fooPromise.catch(() => { }) // 传入的这个函数, 被称之为 executor // > resolve: 回调函数, 在成功时, 回调resolve函数 // > reject: 回调函数, 在失败时, 回调reject函数 const promise = new Promise((resolve, reject) => { console.log("promise传入的函数被执行了") // resolve() reject() }) promise.then(() => { }) promise.catch(() => { })
Promise重构请求
那么有了Promise，我们就可以将之前的代码进行重构了:
// request.js function requestData(url,) { // 异步请求的代码会被放入到executor中 return new Promise((resolve, reject) => { // 模拟网络请求 setTimeout(() => { // 拿到请求的结果 // url传入的是yz, 请求成功 if (url === "yz") { // 成功 let names = ["abc", "cba", "nba"] resolve(names) } else { // 否则请求失败 // 失败 let errMessage = "请求失败, url错误" reject(errMessage) } }, 3000); }) } // main.js const promise = requestData("coderwhy") promise.then((res) => { console.log("请求成功:", res) }, (err) => { console.log("请求失败:", err) })
后续
后面会继续介绍 promise的三种状态，promise的方法，手写promise，敬请期待。最近略忙，日更活动还有10篇任务，等忙完这段时间一定好好写博客。就不求赞了！
