怎么使用JS?promise解決異步問題

這篇“怎么使用JS promise解決異步問題”文章的知識點大部分人都不太理解，所以小編給大家總結了以下內容，內容詳細，步驟清晰，具有一定的借鑒價值，希望大家閱讀完這篇文章能有所收獲，下面我們一起來看看這篇“怎么使用JS promise解決異步問題”文章吧。

一、異步任務

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

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

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

① 定時器：setTimeout、setInterval

② ajax請求

二、promise能解決什么問題

1.回調函數

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

示例：

function onSubmitPost (data) {
	fetch('https://test.post.com', {
		method: 'POST',
		body: JSON.stringify(data)
	})
}
function getAddress (func) {
	const address = '北京市朝陽區牛！'
	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解決回調問題

function getInfo (key) {
	return new Promise((resolve, reject)=>{
		const datas = {
			address: '北京市朝陽區牛！', 
			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解決異步請求問題

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

4.一種優雅的寫法

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

上面的栗子可以改寫成：

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

看起來整潔多了

以上就是關于“怎么使用JS promise解決異步問題”這篇文章的內容，相信大家都有了一定的了解，希望小編分享的內容對大家有幫助，若想了解更多相關的知識內容，請關注億速云行業資訊頻道。