Vue.js_39_Promise

最新推荐文章于 2023-06-30 22:46:11 发布

魏宇轩

最新推荐文章于 2023-06-30 22:46:11 发布

阅读量417

点赞数

分类专栏： Vue.js（更新完）文章标签： vue

本文链接：https://blog.csdn.net/qq_36260974/article/details/105658583

版权

Vue.js（更新完）专栏收录该内容

43 篇文章 0 订阅

订阅专栏

本系列博客汇总在这里：Vue.js 汇总

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 可以以一种非常优雅的方式来解决这个问题。

在这里插入图片描述

三、定时器的异步事件

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

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

这是我们过去的处理方式。
在这里插入图片描述
我们将它换成 Promise 代码。

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

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

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

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

四、定时器异步事件解析

我们先来认认真真的读一读这个程序到底做了什么？
在这里插入图片描述
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()。

六、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>