前言

本篇文章主要講解了什么異步任務(wù)，promise解決的了什么問(wèn)題，如何使用promise和async&await解決代碼可讀性和可維護(hù)性。

一、異步任務(wù)

同步任務(wù)就不說(shuō)了，說(shuō)下我們所了解到的異步任務(wù)是什么，和有哪些任務(wù)是異步任務(wù)。

1、異步的概念是在運(yùn)行同步任務(wù)的時(shí)候可以繼續(xù)做其它的事情，不必等待其它可能阻塞它運(yùn)行的任務(wù)。

2、我們所了解的異步任務(wù)大多就是

① 定時(shí)器：setTimeout、setInterval

② ajax請(qǐng)求

二、promise能解決什么問(wèn)題

1.回調(diào)函數(shù)

比如我們有個(gè)場(chǎng)景是需要提交用戶(hù)信息功能，但是在這個(gè)功能之前需要先獲取用戶(hù)當(dāng)前的位置信息，當(dāng)位置信息獲取成功之后才能進(jìn)行用戶(hù)信息提交。通常的解決辦法就是將后續(xù)的提交動(dòng)作放到獲取位置信息成功之后。

示例：

function onSubmitPost (data) {
	fetch('https://test.post.com', {
		method: 'POST',
		body: JSON.stringify(data)
	})
}
function getAddress (func) {
	const address = '北京市朝陽(yáng)區(qū)牛！'
	func(address)
}
const getUserInfo = (func) => {
	const userInfo = {name: '測(cè)試', age: '20'}
	func(userInfo)
}
function onSubmit () {
	getAddress((address)=>{
		const addr = address
		getUserInfo((userInfo)=>{
			const user = userInfo
			onSubmitPost({addr,...userInfo})
		})
	})
}
onSubmit()

寫(xiě)出來(lái)都感覺(jué)頭疼

2.使用promise解決回調(diào)問(wèn)題

function getInfo (key) {
	return new Promise((resolve, reject)=>{
		const datas = {
			address: '北京市朝陽(yáng)區(qū)牛！', 
			user: {
				name: '測(cè)試', 
				age: '20'
			}
		}
		if (datas[key]) {
			resolve(datas[key])
		} else {
			reject('沒(méi)有')
		}
	})
}
getInfo('address').then((res)=>{
	const address = res
	return getInfo('user')
}).then((res)=>{
	const user = res
	onSubmitPost({address, ...user})
})

3.使用promise解決異步請(qǐng)求問(wèn)題

實(shí)際在獲取位置信息時(shí)就是異步獲取的，當(dāng)然獲取用戶(hù)信息也可以是通過(guò)api獲取，那么用promise就可以避免沒(méi)有獲取到需要的信息就已經(jīng)提交了post數(shù)據(jù)。

4.一種優(yōu)雅的寫(xiě)法

使用async&await（生成器的語(yǔ)法糖，后面總結(jié)一下生成器??）它就是處理異步操作的另一種寫(xiě)法，語(yǔ)法糖

上面的栗子可以改寫(xiě)成：

async function sumbit () {
	const address = await getInfo('address')
	const user= await getInfo('user')
	onSubmitPost({address, ...user})
}

看起來(lái)整潔多了

5、promise還有很多其它的擴(kuò)展用法，我就不說(shuō)了網(wǎng)上很多推薦一個(gè)地址很詳細(xì)的用法（MDN）

https://developer.mozilla.org/zh-CN/docs/Learn/JavaScript/Asynchronous/Promises

總結(jié)

后面還會(huì)總結(jié)，生成器和promise更多的擴(kuò)展用法，在實(shí)際開(kāi)發(fā)中的用法。

到此這篇關(guān)于JS promise解決異步問(wèn)題過(guò)程詳解的文章就介紹到這了,更多相關(guān)JS promise解決異步內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評(píng)論