Promise


  • 一、什么是 Promise 呢?
  • 二、网络请求的回调地狱
  • 三、定时器的异步事件
  • 四、定时器异步事件解析
  • 五、Promise 三种状态
  • 六、Promise 链式调用
  • 七、Promise 的 all 方法



源码工程文件为:


一、什么是 Promise 呢?

Promise 是异步编程的一种解决方案。

function runAsync(){
var p = new Promise(function(resolve, reject){
//做一些异步操作
setTimeout(function(){
console.log('执行完成');
resolve('数据');
}, 2000);
});
return p;
}
runAsync()

那什么时候我们会来处理异步事件呢?

一种很常见的场景应该就是网络请求了。

我们封装一个网络请求的函数,因为不能立即拿到结果,所以不能像简单的 3+4=7 一样将结果返回。

所以往往我们会传入另外一个函数,在数据请求成功时,将数据通过传入的函数回调出去。如果只是一个简单的网络请求,那么这种方案不会给我们带来很大的麻烦。

但是,当网络请求非常复杂时,就会出现回调地狱。

二、网络请求的回调地狱

我们来考虑下面的场景(有夸张的成分):

我们需要通过一个 url1 从服务器加载一个数据 data1,data1 中包含了下一个请求的 url2,我们需要通过 data1 取出 url2,从服务器加载数据 data2,data2 中包含了下一个请求的 url3,我们需要通过 data2 取出url3,从服务器加载数据 data3,data3 中包含了下一个请求的 url4,发送网络请求 url4,获取最终的数据 data4。

上面的代码有什么问题吗?

正常情况下,不会有什么问题,可以正常运行并且获取我们想要的结果。但是,这样额代码难看而且不容易维护。我们更加期望的是一种更加优雅的方式来进行这种异步操作。

如何做呢?就是使用 Promise。

Promise 可以以一种非常优雅的方式来解决这个问题。

Vue.js_39_Promise_异步操作

三、定时器的异步事件

我们先来看看 Promise 最基本的语法。这里,我们用一个定时器来模拟异步事件:

假设下面的 data 是从网络上 1 秒后请求的数据,console.log 就是我们的处理方式。

这是我们过去的处理方式。

Vue.js_39_Promise_异步操作_02

我们将它换成 Promise 代码。

Vue.js_39_Promise_vue_03

看起来下面的是多此一举的。

首先,下面的 Promise 代码明显比上面的代码看起来还要复杂。

其次,下面的 Promise 代码中包含的 resolve、reject、then、catch 都是些什么东西?

我们先不管第一个复杂度的问题,因为这样的一个小程序根本看不出来 Promise 真正的作用。

四、定时器异步事件解析

我们先来认认真真的读一读这个程序到底做了什么?

Vue.js_39_Promise_vue_03

new Promise 很明显是创建一个 Promise 对象。小括号中 ((resolve, reject) => {}) 也很明显就是一个函数,而且我们这里用的是之前刚刚学习过的箭头函数。但是 resolve, reject 它们是什么呢?

我们先知道一个事实:在创建 Promise 时,传入的这个箭头函数是固定的(一般我们都会这样写)

resolve 和 reject 它们两个也是函数,通常情况下,我们会根据请求数据的成功和失败来决定调用哪一个。

成功还是失败?

如果是成功的,那么通常我们会调用 resolve(messsage),这个时候,我们后续的 then 会被回调。

如果是失败的,那么通常我们会调用 reject(error),这个时候,我们后续的 catch 会被回调。

这就是 Promise 最基本的使用了。

五、Promise 三种状态

首先,当我们开发中有异步操作时, 就可以给异步操作包装一个 Promise,异步操作之后会有三种状态

我们一起来看一下这三种状态:


  • ​pending​​:等待状态,比如正在进行网络请求,或者定时器没有到时间。
  • ​fulfill​​:满足状态,当我们主动回调了 resolve 时,就处于该状态,并且会回调 ​​.then()​​。
  • ​reject​​:拒绝状态,当我们主动回调了 reject 时,就处于该状态,并且会回调 ​​.catch()​​。Vue.js_39_Promise_异步操作_05
    Vue.js_39_Promise_网络请求_06

六、Promise 链式调用

我们在看 Promise 的流程图时,发现无论是 then 还是 catch 都可以返回一个 Promise 对象。

所以,我们的代码其实是可以进行链式调用的:

这里我们直接通过 Promise 包装了一下新的数据,将 Promise 对象返回了。


  • ​Promise.resovle()​​:将数据包装成 Promise 对象,并且在内部回调 resolve() 函数
  • ​Promise.reject()​​:将数据包装成 Promise 对象,并且在内部回调 reject() 函数

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>

<script>
// 参数 -> 函数(resolve, reject)
// resolve, reject本身它们又是函数
// 链式编程
new Promise((resolve, reject) => {

// 第一次网络请求的代码
setTimeout(() => {
resolve()
}, 1000)

}).then(() => {
// 第一次拿到结果的处理代码
console.log('Hello World');
console.log('Hello World');
console.log('Hello World');
console.log('Hello World');
console.log('Hello World');
console.log('Hello World');

return new Promise((resolve, reject) => {

// 第二次网络请求的代码
setTimeout(() => {
resolve()
}, 1000)
})
}).then(() => {

// 第二次处理的代码
console.log('Hello Vuejs');
console.log('Hello Vuejs');
console.log('Hello Vuejs');
console.log('Hello Vuejs');
console.log('Hello Vuejs');
console.log('Hello Vuejs');

return new Promise((resolve, reject) => {

// 第三次网络请求的代码
setTimeout(() => {
resolve()
})
})
}).then(() => {

// 第三处理的代码
console.log('Hello Python');
console.log('Hello Python');
console.log('Hello Python');
console.log('Hello Python');
console.log('Hello Python');
})
</script>
</body>
</html>

链式调用简写

Vue.js_39_Promise_异步操作_07

Vue.js_39_Promise_网络请求_08

七、Promise 的 all 方法

某些时候我们的需要可能依赖所有请求。

Vue.js_39_Promise_异步操作_09

如有错误,欢饮指正!