JS promise解決異步問(wèn)題過(guò)程詳解
前言
本篇文章主要講解了什么異步任務(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)文章希望大家以后多多支持腳本之家！
相關(guān)文章
javascript實(shí)現(xiàn)點(diǎn)亮燈泡特效示例
這篇文章主要介紹了javascript實(shí)現(xiàn)點(diǎn)亮燈泡特效示例，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2019-10-10
javascript之Partial Application學(xué)習(xí)
在數(shù)學(xué)中，一個(gè)函數(shù)是描述每個(gè)輸入值對(duì)應(yīng)唯一輸出值的這種對(duì)應(yīng)關(guān)系，符號(hào)為 f(x)。例如，表達(dá)式 f(x)=x2表示了一個(gè)函數(shù) f，其中每個(gè)輸入值x都與唯一輸出值x2相聯(lián)系2013-01-01
JavaScript本地存儲(chǔ)實(shí)現(xiàn)用戶(hù)名存儲(chǔ)案例
本文主要介紹了JavaScript本地存儲(chǔ)實(shí)現(xiàn)用戶(hù)名存儲(chǔ)案例，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2022-07-07
js或者jquery判斷圖片是否加載完成實(shí)現(xiàn)代碼
需要獲得圖片的寬度和高度，有些js或者jquery代碼在還沒(méi)有加載完圖片時(shí)就執(zhí)行了，這個(gè)問(wèn)題該怎么解決呢？接下來(lái)分別介紹下js與jquery提供的方法2013-03-03
基于JavaScript實(shí)現(xiàn)輪播圖原理及示例
這篇文章主要為大家詳細(xì)介紹了基于JavaScript實(shí)現(xiàn)輪播圖原理及示例，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-02-02
這篇文章主要為大家詳細(xì)介紹了微信小程序?qū)崿F(xiàn)九宮格效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-07-07
基于JavaScript實(shí)現(xiàn)輪播圖效果
這篇文章主要為大家詳細(xì)介紹了基于JavaScript實(shí)現(xiàn)輪播圖效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-01-01
js實(shí)現(xiàn)加載頁(yè)面就自動(dòng)觸發(fā)超鏈接的示例
下面小編就為大家?guī)?lái)一篇js實(shí)現(xiàn)加載頁(yè)面就自動(dòng)觸發(fā)超鏈接的示例。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-08-08
這篇文章主要介紹了Angular服務(wù)器端渲染緩存功能問(wèn)題，內(nèi)存緩存可用于應(yīng)用程序本身的渲染頁(yè)面和API請(qǐng)求。?兩種使用場(chǎng)合都通過(guò)開(kāi)發(fā)包@ngx-ssr或cache提供2022-06-06
這篇文章主要為大家舉例介紹了js對(duì)象繼承的幾種模式，內(nèi)容很全面，感興趣的小伙伴們可以參考一下2016-01-01