IT数码 购物 网址 头条 软件 日历 阅读 图书馆
TxT小说阅读器
↓语音阅读,小说下载,古典文学↓
图片批量下载器
↓批量下载图片,美女图库↓
图片自动播放器
↓图片自动播放器↓
一键清除垃圾
↓轻轻一点,清除系统垃圾↓
开发: C++知识库 Java知识库 JavaScript Python PHP知识库 人工智能 区块链 大数据 移动开发 嵌入式 开发工具 数据结构与算法 开发测试 游戏开发 网络协议 系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑 笔记本 显卡 显示器 固态硬盘 硬盘 耳机 手机 iphone vivo oppo 小米 华为 单反 装机 图拉丁
 
   -> JavaScript知识库 -> Promise对象 -> 正文阅读

[JavaScript知识库]Promise对象

在学习Promise之前,我们了解什么是同步什么是异步。

同步:脚本按顺序执行,执行完当前任务后,才会执行下一个任务。

写个代码说明就明白了

<script>
        console.log(1);
		for (let i = 0; i < 1000; i++) {
			
		}
		console.log(3);
        //这段代码打印的结果是 1  3
        //但是控制台没有第一时间就打印出3,它等待for循环执行完1000次以后,再执行打印3
</script>

异步:不按照代码的顺序执行,一个任务有一个或多个回调函数(callback),前一个任务结束后,不是执行后一个任务,而是执行回调函数,后一个任务则是不等前一个任务结束就执行,所以程序的执行顺序与任务的排列顺序是不一致的、异步的。

想要学会异步编程,就必须精通回调函数,异步的设计思想就是回调函数,如果回调函数没有学好的同学可以先去把回调函数学好,再学这个知识。

Promise

Promise在ES5已经出现了? ES6直接写入标准。

Promise是一个构造函数,不是异步非阻塞函数,用new Promise创建一个数据容器。

与之前学过的数据相比较:

Map Set Array Object被动产生数据,给它添加数据,Promise主动产生数据不用给它添加数据。
?

Promise创建的数据容器有then函数,当这个数据容器取数据就用then函数,它是一个非阻塞异步函数,是官方提供的、浏览器底层的c/c++写的,常见的非阻塞异步函数有setTimeout、node.js中的readFile()?;我们自己设计的异步函数,绝对是阻塞异步函数,因为它是js脚本语言写的,不能实现同时执行,意思代码必须执行完前一行才能执行下一行。

简单使用一下then函数:

<script>
        //创建一个Peomise对象
       var p = new Promise(function(n1,n2){//这里的n1,n2为回调函数
            var n=10
            n1(n)//调用了n1 让Promise内部产生了数据
    }) 
        //此时我们需要用then函数来获取产生的数据
        p.then(function(data){
            console.log(data) //10          
    })
</script>

注意: then函数的返回值是一个新的Promise对象,是then传入的回调函数的返回值

传入的回调函数的返回值有两种情况:

1、如果返回值是一个Promise对象,那么就是它;

2、如果不是一个Promise对象,那么就会把函数的结果包装为一个生成了数据的Promise对象;

接下来我们说明上述例子中的n1,n2是什么?

n1在很多文档中写成resolve,代表异步操作执行成功后的回调函数;

n2则是写成reject,代表异步操作执行失败后的回调函数

在我们实际开发中,我们需要从后端中获取数据,有时获取的数据是正确的,这时我们用n1来触发,让Promise内产生正确的数据;有时获取的数据错误的,就要用n2来触发,告知Promise体系是业务错误的数据。

具体代码说明:

<script>
        //创建一个Peomise对象
       var p = new Promise(function(n1,n2){//这里的n1,n2为回调函数
            	var data = {
					code: 404,
					info: "假数据 代表以后写业务 生成的数据 比如网络请求"
				}
                //判断数据是否正确 这里是错误数据 用n2触发
            if (data.code == 404) {
					n2(data.info) //触发 
                    //这条程序运行后程序就报错了
					//除了n2可以触发Promise产生错误的数据 还可以直接抛出错误
					// throw "我是业务上错误的数据"
				} else if (data.code == 200) {
					n1(data.info)
				}
            }) 
        //后面的代码不再执行
        p.then(function(data){
            console.log(data)           
    })
        console.log(111) 
</script>

?控制台的情况:

?

?我们不能让我们写的程序就卡在这里,这里就要引入Promise所创建的对象的另一个方法 catch。

catch用来捕获错误,它的底层原理就是try-catch语句。用法非常简单,用上个例子代码的说明,只需要在then函数后点catch函数就行了

<script>
        //创建一个Peomise对象
       var p = new Promise(function(n1,n2){//这里的n1,n2为回调函数
            	var data = {
					code: 404,
					info: "假数据 代表以后写业务 生成的数据 比如网络请求"
				}
                //判断数据是否正确 这里是错误数据 用n2触发
            if (data.code == 404) {
					n2(data.info) //触发 
                    //这条程序运行后程序就报错了
					//除了n2可以触发Promise产生错误的数据 还可以直接抛出错误
					// throw "我是业务上错误的数据"
				} else if (data.code == 200) {
					n1(data.info)
				}
            }) 
        //后面的代码不再执行
        p.then(function(data){
            console.log(data)           
    }).catch(function(err){
		console.log(404); //404
	})
        console.log(111) //111
</script>

捕获到错误后,就能够继续执行下文了。

到此我们已经学会了Promise的基本使用,那么有一个特殊情况,当正确数据是一个new Error类型时,程序是否会报错呢?

很明显不会报错,因为它是一个正确的业务对象,只是它是一个err类型的对象。

代码展示:

<script>
        //创建一个Peomise对象
       var p = new Promise(function(n1,n2){//这里的n1,n2为回调函数
            	var data = {
					code: 200,
					info: "假数据 代表以后写业务 生成的数据 比如网络请求"
				}
                //判断数据是否正确 这里是错误数据 用n2触发
            if (data.code == 404) {
					n2(data.info) 
				} else if (data.code == 200) {
	                var err=new Error("正确的业务对象 但是它是个js中的err类型的对象")
					n1(err)
				}
            }) 
        p.then(function(data){
            console.log(data)   //Error: 正确的业务对象 但是它是个js中的err类型的对象        
    }).catch(function(err){
		console.log(404); 
	})
</script>

?

  JavaScript知识库 最新文章
ES6的相关知识点
react 函数式组件 & react其他一些总结
Vue基础超详细
前端JS也可以连点成线(Vue中运用 AntVG6)
Vue事件处理的基本使用
Vue后台项目的记录 (一)
前后端分离vue跨域,devServer配置proxy代理
TypeScript
初识vuex
vue项目安装包指令收集
上一篇文章      下一篇文章      查看所有文章
加:2022-07-21 21:27:19  更:2022-07-21 21:29:51 
 
开发: C++知识库 Java知识库 JavaScript Python PHP知识库 人工智能 区块链 大数据 移动开发 嵌入式 开发工具 数据结构与算法 开发测试 游戏开发 网络协议 系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑 笔记本 显卡 显示器 固态硬盘 硬盘 耳机 手机 iphone vivo oppo 小米 华为 单反 装机 图拉丁

360图书馆 购物 三丰科技 阅读网 日历 万年历 2024年11日历 -2024/11/23 13:50:50-

图片自动播放器
↓图片自动播放器↓
TxT小说阅读器
↓语音阅读,小说下载,古典文学↓
一键清除垃圾
↓轻轻一点,清除系统垃圾↓
图片批量下载器
↓批量下载图片,美女图库↓
  网站联系: qq:121756557 email:121756557@qq.com  IT数码