首页 > 编程语言 >Javascript Promise用法

Javascript Promise用法

时间:2024-03-29 21:13:50浏览次数:26  
标签:function resolve console 函数 Javascript 用法 Promise reject

构造 Promise

现在我们构造一个promise对象:

new Promise(function (resolve,reject)) {
	//要做的事情...
}

通过新建一个Promise 对象好像并没有看出它怎样“更加优雅地书写复杂的异步任务”。我们之前遇到的异步任务都是一次异步,如果需要多次调用异步函数呢?例如,如果我想分三次输出字符串,第一次间隔1秒,第二次间隔4秒,第三次间隔3秒:

实例

setTimeout(function(){ 

			console.log("First"); 

		setTimeout(function (){ 

				console.1og("Second"); 

			setTimeout(function(){ 

					console.log("Third"); 

			},3000); 

		},4000);

},1000);

使用延迟函数固然可以实现这个功能,但是在一个复杂的程序中,使用函数瀑布实现程序是一件特别繁琐的事情。

我们现在使用Promise来实现:

实例

new Promise(function(resolve, reject){ 

	setTimeout(function (){ 

		console.log("First"); 

		resolve(); 
		
		},1000); 

}).then(function(){ 

		return new Promise(function(resolve,reject) 

			setTimeout(function (){ 
			
				console.1og("Second"); 
			
				resolve();
            
        	},4000);
     	});
}).then(function(){ 
    
    setTimeout(function (){ 
			
        console.1og("Third");
        
    },3000);
    
});

Promise的使用

Promise 构造函数只有一个参数,是一个函数,这个函数在构造之后会直接被异步运行,所以我们称之为起始函数。起始函数包含两个参数resolve和 reject。

当Promise 被构造时,起始函数会被异步执行:

实例

new Promise(function(resolve, reject){ 

	console.1og("Run"); 3});

这段程序会直接输出 Run

resolve 和 reject 都是函数,其中调用 resolve 代 表一切正常,reject是出现异常时所调用的:

实例

new Promise(function(resolve, reject){ 

	var a=0; 

	var b=1; 

	if (b ==θ)reject("Divide zero"); 

	else resolve(a / b); 
    
}).then(function(value){ 

	console.log("a/b="+value); 

}).catch(function(err){
    
    console.log(err); 

}).finally(function(){ 
    
	console.log("End");
});

这段程序执行结果是:

1 a/b-0 
2 End

Promise 类有 .then().catch()和.finally()三个方 法,这三个方法的参数都是一个函数,then()可以将参数中的函数添加到当前Promise的正常执行序列,catch()则是设定Promise的异常处理序列,finally()是在Promise 执行的最后一定会执 行的序列。.then()传入的函数会按顺序依次执行,有任何异常都会直接跳到catch序列:

实例

new Promise(function(resolve, reject){ 

	console.log(1111); 

	resolve(2222); 

}).then(function (value){ 

	console.1og(value); 

return 3333; 

}).then(function(value){ 

	console.log(value); 

	throw "An error"; 

}).catch(function(err){ 

	console.log(err);
});

执行结果:

1 1111 
2 2222 
3 3333 
4 An error

resolve()中可以放置一个参数用于向下一个then传递一个值,then中的函数也可以返回一个值传递给 then。但是,如果then中返回的是一个Promise 对象,那么下一个 then 将相当于对这个返回的Promise 进行操作,这一点从刚才的计时器的例子中可以看出来。

reject()参数中一般会传递一个异常给之后的catch函数用于处理异常。

但是请注意以下两点:

  • resolve 和 reject的作用域只有起始函数,不包括then以及其他序列;
  • resolve 和 reject 并不能够使起始函数停止运行,别忘了return。

Promise 函数

上述的“计时器”程序看上去比函数瀑布还要长,所以我们可以将它的核心部分写成一个Promise函数:

实例 :

function print(delay,message){ 

	return new Promise(function (resolve, reject){ 

		setTimeout(function(){ 

			console.log(message); 

			resolve();
			
     	},delay); 

	}); 

}

然后我们就可以放心大胆的实现程序功能了:

实例

print(1000,"First").then(function (){ 

	return print(4000,"Second"); 

}).then(function(){ 

	print(3000,"Third"); 
})

这种返回值为一个 Promise 对象的函数称作Promise 函数,它常常用于开发基于异步操作的库。

标签:function,resolve,console,函数,Javascript,用法,Promise,reject
From: https://www.cnblogs.com/dutianyu/p/18104607

相关文章

  • javaScript学习笔记
    关于表单验证的简单实践注意点:1.函数的使用如果在script中需要调用某个function,例如checkUserName(),请确保在定义该函数时的写法为usernameInput.onblur=checkUserName;functioncheckUserName(){如果写成usernameInput.onblur=functioncheck......
  • (day 22)JavaScript学习笔记(内置对象1之Number、Math、Date)
    概述         这是我的学习笔记,记录了JavaScript的学习过程。在写博客的时候我会尽量详尽的记录每个知识点。如果你完全没接触过JavaScript,那么这一系列的学习笔记可能会对你有所帮助。    今天学习JavaScript内置的对象,主要是Number、Math、Date。1.内置......
  • 【QT入门】 QListWidget各种常见用法详解之图标模式
    往期回顾【QT入门】Qt代码创建布局之多重布局变换与布局删除技巧-CSDN博客【QT入门】QTabWidget各种常见用法详解-CSDN博客【QT入门】QListWidget各种常见用法详解之列表模式-CSDN博客【QT入门】QListWidget各种常见用法详解之图标模式QListWidget有列表和图标两种......
  • 【QT入门】 QTabWidget各种常见用法详解
    往期回顾:【QT入门】Qt代码创建布局之分裂器布局详解-CSDN博客【QT入门】Qt代码创建布局之setLayout使用-CSDN博客【QT入门】Qt代码创建布局之多重布局变换与布局删除技巧-CSDN博客 【QT入门】QTabWidget各种常见用法详解一般来说,学一个新的控件,首先要看他是怎么构......
  • JavaScript代码安全性提升:选择和使用JS混淆工具的指南
    引言在Web开发中,JavaScript是一种常用的脚本语言,然而,由于其代码容易被他人轻易获取和修改,为了保护JavaScript代码的安全性和版权,我们需要使用JS混淆工具。本文将介绍什么是JS混淆工具、为什么要使用以及如何选择合适的JS混淆工具,同时还会列举一些常用的JS混淆工具。 正文什......
  • 五款常用在线JavaScript加密混淆工具详解:jscrambler、JShaman、jsfack、ipaguard和jje
    摘要本篇技术博客将介绍五款常用且好用的在线JavaScript加密混淆工具,包括jscrambler、JShaman、jsfack、freejsobfuscator和jjencode。通过对这些工具的功能及使用方法进行详细解析,帮助开发人员更好地保护和加密其JavaScript代码,提升网站的安全性和保密性。 引言在当今......
  • JavaScript new一个对象的详细过程
    JavaScriptnew一个对象的详细过程new实现过程new实现原理new手写实现实现过程/原理开辟一块内存,创建一个空对象执行构造函数对这个空对象进行构造给空对象添加__proto__属性调用函数改变this指向最后返回this指向的新对象(如果是引用类型则返回引用类型......
  • JavaScript快速入门笔记之七(String:字符串类型、RegExp:正则表达式)
    JavaScript快速入门笔记之七(String:字符串类型、RegExp:正则表达式)String:字符串类型什么是字符串?底层本质:一串字符组成的只读字符数组包装类型:临时封装原始类型数据,并提供对数据操作方法的对象——类型名和原始类型名相同!StringNumberBoolean何时使用:不必手动创建!......
  • Uncaught (in promise) DOMException: Failed to execute 'setRequestHeader' on 'XML
    根据错误提示"Uncaught(inpromise)DOMException:Failedtoexecute'setRequestHeader'on'XMLHttpRequest':Theobject'sstatemustbeOPENED.",你遇到了一个错误,该错误表明在调用setRequestHeader方法时,XMLHttpRequest对象的状态必须是已打开(OPENED)的状态。解决此问......
  • ADB 操作命令详解及用法大全
    ADB(AndroidDebugBridge)是用于在计算机和Android设备之间进行通信的命令行工具。它可以用于调试和测试Android应用程序,以及在计算机上执行各种操作。以下是一些常用的ADB命令及其用法:adbdevices用途:列出连接到计算机的所有Android设备。示例:adbdevicesadb......