promise概念

121 阅读1分钟
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
	</body>
	<script type="text/javascript">
		//模拟异步
		// setTimeout(function(){
		// 	console.log("hello promise")
		//})

		//回调函数
		new Promise((resolve, reject) => {
			setTimeout(() => {
				//成功时调用
				resolve('成功')
				//失败时调用
				reject('失败')
			}, 1000)
		}).then((data) => {
			//成功时的回调函数
			console.log(data)
		}).catch((err) => {
			//失败时的回调函数
			console.log(err)
		})

		//另外处理形式
		//可以在then里面传入两个函数
		new Promise((resolve, reject) => {
			setTimeout(() => {
				//成功时调用
				resolve('成功')
				//失败时调用
				reject('失败')
			}, 1000)
		}).then((data) => {
			//成功时的回调函数
			console.log(data)
		}, (err) => {
			//失败时的回调函数
			console.log(err)
		})




		//1.链式写法
		new Promise((resolve, reject) => {
			setTimeout(() => {
				resolve('aaa')
			}, 1000)
		}).then((res) => {
			console.log(res)
			return new Promise((resolve, reject) => {
				resolve(res + '111')
			})
		}).then((res) => {
			console.log(res)
			return new Promise((resolve, reject) => {
				resolve(res + '222')
			})
		}).then((res) => {
			console.log(res)
		})

		//2.链式写法的简写
		new Promise((resolve, reject) => {
			setTimeout(() => {
				resolve('aaa')
			}, 1000)
		}).then((res) => {
			console.log(res)
			return Promise.resolve(res + '111')
		}).then((res) => {
			console.log(res)
			//return Promise.resolve(res + '222')

			//调用失败时的方法
			//可以用抛出异常的方法,catch函数也可以捕获
			//return Promise.reject('err message')
			throw 'err message'
		}).then((res) => {
			console.log(res)
		}).catch((err) => {
			console.log(err)
		})


		//promise.all方法使用
		//场景:有一个方法,需要两个网络请求返回值,缺一不可
		Promise.all([
			new Promise((resolve, reject) => {
				setTimeout(() => {
					resolve({
						name: 'kobe',
						age: 22
					})
				}, 1000)
			}),
			new Promise((resolve, reject) => {
				setTimeout(() => {
					resolve({
						name: 'kaka',
						age: 33
					})
				}, 2000)
			})
		]).then((results) => {
			//results两次网络请求的返回值,会传到一个数组当中
			console.log(results)
		})
	</script>
</html>