欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

JS promise解決異步問題過程詳解

 更新時間：2023年04月06日 10:24:11   作者：菜雞愛上編程  
Promise是異步編程的一種解決方案，比傳統(tǒng)的解決方案——回調(diào)函數(shù)和事件——更合理和更強大。簡單說就是一個容器，里面保存著某個未來才會結(jié)束的事件（通常是一個異步操作）的結(jié)果。從語法上說，Promise是一個對象，從它可以獲取異步操作的消息

前言

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

一、異步任務(wù)

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

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

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

① 定時器：setTimeout、setInterval

② ajax請求

二、promise能解決什么問題

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

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

示例：

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

寫出來都感覺頭疼

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

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

3.使用promise解決異步請求問題

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

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

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

上面的栗子可以改寫成：

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

看起來整潔多了

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

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

總結(jié)

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

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

相關(guān)文章

最新評論