Promise简单使用

Promise.all 简单使用

const reqParams = [
	{url: '/abc',params: {page: 10, current: 1}}, 
	{url: '/def',params: {page: 50, current: 20}},
	{url: '/ghd',params: {search: 'name', str: '123'}}
]
const api = function(url, params) {
	return new Promise((resolve,reject) => {
		const xmlhttp = new XMLHttpRequest()
		xmlhttp.onreadystatechange = function() {
			if (xmlhttp.readyState==4) {
			  	if (xmlhttp.status==200) {
			   		resolve(xmlhttp.responseText)
			   	} else {
	    			reject(xmlhttp.statusText)
	    		}
	  		}
		}
		xmlhttp.open('post',url, true)
		xmlhttp.send(params)
	})
}
const promises = reqParams.map(ele => api(ele.url, ele.params))
Promise.all(promises).then(res => {}).catch(err => {})

Promise 之 eventloop

Promise 中有异步操作

当promse中包含异步操作时，实例的 then/catch 会在下个 eventloop执行,但是promise中的代码会同步执行

console.log(4)
setTimeout(() => {
	console.log(5)
},200)
const promise = new Promise((resolve, reject) => {
	//这里的代码会 按顺序执行
	console.log(1)
	setTimeout(resolve, 200, 2)
})
promise.then(res => {
	// 这里会在下个 eventloop 执行
	console.log(res)
})
console.log(3)
// 上面代码会依次打印 4、1、3、5、2

Promise 中没有异步操作

console.log(4)
setTimeout(() => {
	console.log(5)
})
const promise = new Promise((resolve, reject) => {
	console.log(1)
	resolve(2)
})
promise.then(res => {
	console.log(res)
})
console.log(6)
// 上面代码会依次打印 4、1、6、2、5
// 虽然先 运行的 setTimeout，但是 5 是在 下个 eventloop中打印。promise.then 会在同步任务执行完成之后执行

Promise.resolve() & Promise.reject() 的 then/catch 方法也会在本次同步任务执行完成之后执行

reject 方法

Promise 中的 reject 方法

reject 方法，我这里理解 就等同于 throw

const promise1 = new Promise((resolve,reject) => {
	reject(1)
})
const promise2 = new Promise((resolve,reject) => {
	throw 1
})

async 函数抛出错误

异步函数执行之后，也会返回一个promise，那异步函数如何触发 reject 呢？throw

async function test(){
	throw 2
}
test().catch(err => {
	console.log(err)
})