vue Promise的使用

一、Promise是什么？

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

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

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

我们封装一个网络请求的函数，因为不能立即拿到结果，所以不能像简单的3+4=7一样将结果返回。所以往往我们会传入另外一个函数，在数据请求成功时，将数据通过传入的函数回调出去。如果只是一个简单的网络请求，那么这种方案不会给我们带来很大的麻烦。

 

 

三、基本使用

01-Promise的基本使用.html

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

<script>
  // 什么情况下会用到Promise?
  // 一般情况下是有异步操作时,使用Promise对这个异步操作进行封装
  // new -> 构造函数(1.保存了一些状态信息  2.执行传入的函数)
  // 在执行传入的回调函数时, 会传入两个参数, resolve, reject.本身又是函数
  new Promise((resolve, reject) => {
    setTimeout(() => {
      // 成功的时候调用resolve
      // resolve('Hello World')
      // 失败的时候调用reject
      reject('error message')
    }, 1000)
  }).then((data) => {
    // 1.100行的处理代码
    console.log(data);
  }).catch((err) => {
    console.log(err);
  })
</script>
</body>
</html>

 

02-Promise的另外处理形式.html

 

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

<script>
  new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve('Hello Vuejs')
      //reject('error message')
    }, 1000)
  }).then(data => {
    console.log(data);
  }, err => {
    console.log(err);
  })
</script>
</body>
</html>

 

四、链式调用

03-Promise的链式调用.html

 

<!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("hello")
				}, 1000)
			}).then(data => {
				// 第一次拿到结果的处理代码
				console.log(data);
				return data + '1111';
			}).then(data => {

				// 第二次处理的代码
				console.log(data);
				return data + '2222'
			}).then(data => {
				// 第三处理的代码
				console.log(data);

			})
		</script>
	</body>
</html>

 

资源丰富的的网盘资源：网盘资源大全！ 推荐一个适合零基础学习SQL的网站：不用安装数据库，在线轻松学习SQL！
posted @ 2022-01-29 16:35  万笑佛  阅读(1911)  评论(0)    收藏  举报