js獲取異步函數(shù)數(shù)據(jù)的實(shí)現(xiàn)
異步函數(shù)是js中經(jīng)常會(huì)用到的,它的作用無(wú)非就是進(jìn)行一些異步的操作(處理數(shù)據(jù))。那么,常見(jiàn)的異步函數(shù)有哪些呢,我們一般又是如何獲取異步函數(shù)的數(shù)據(jù)呢?今天這篇文章就是圍繞這個(gè)問(wèn)題去寫(xiě)的。
異步函數(shù)
一般正常情況下,js中的函數(shù)是一個(gè)一個(gè)地按照順序來(lái)完成的。但是異步函數(shù)可以改變執(zhí)行順序。不過(guò)異步任務(wù)必須在同步任務(wù)執(zhí)行結(jié)束之后,從任務(wù)隊(duì)列中依次取出執(zhí)行。
常見(jiàn)的異步函數(shù)一共有四類(lèi):
- 回調(diào)函數(shù)
- promise函數(shù)
- Generator函數(shù)
- async/await函數(shù)
1. 回調(diào)函數(shù)
回調(diào)函數(shù)一般是作為某個(gè)函數(shù)的入?yún)ⅲ缓笤诤瘮?shù)內(nèi)部執(zhí)行這個(gè)回調(diào)函數(shù)。常見(jiàn)的回調(diào)函數(shù)有ajax,setTimeouut定時(shí)器類(lèi),dom事件回調(diào)等。
testA(cb) { cb(); } setTimeout(() => { console.log('這是一個(gè)回調(diào)函數(shù)') }, 100)
缺點(diǎn): 不能try catch捕獲錯(cuò)誤, 不能直接return。
promise
promise函數(shù)是一種特殊的異步函數(shù),里面包含三種狀態(tài):pending、fulfilled(resolved)、rejected。pending是promise的初始狀態(tài),resolved表示執(zhí)行完成且成功的狀態(tài),rejected表示執(zhí)行完成且失敗的狀態(tài)。三個(gè)狀態(tài)不可逆轉(zhuǎn)。
Promise本身是同步,then的內(nèi)容是異步:
let promiseFunc = new Promise((resolve, reject) => { // 執(zhí)行同步代碼 resolve(); }).then((res) => { console.log(res) },(err) => { console.log(err); })
Generator函數(shù)
Generator 是一個(gè)可以暫停執(zhí)行(分段執(zhí)行)的函數(shù),函數(shù)名前面要加星號(hào),是一個(gè)狀態(tài)機(jī),封裝了多個(gè)內(nèi)部狀態(tài)。
function *myTest() { yield 'I', yield 'am', yield 'queen' }
async/await函數(shù)
async修飾符加在函數(shù)前面,返回一個(gè)promise,可以使用then添加回調(diào)函數(shù)。 await后跟著一個(gè)promise或者一個(gè)原始類(lèi)型的值(會(huì)自動(dòng)轉(zhuǎn)成立即 resolved 的 Promise 對(duì)象),等待resolve的結(jié)果。任何一個(gè)await后的Promise發(fā)生reject,整個(gè)aysnc都會(huì)中斷,需要try{}catch(err){}來(lái)捕獲錯(cuò)誤。
async function myTest() { let val = await new Promise((resolve) => { resolve(1) }); }
如何獲取異步函數(shù)的數(shù)據(jù)
獲取異步函數(shù)的數(shù)據(jù)一般分為三種:回調(diào)函數(shù),promise和async和await
回調(diào)函數(shù)
回調(diào)函數(shù)的這種很簡(jiǎn)單,就是直接將數(shù)據(jù)傳進(jìn)回調(diào)函數(shù)里作為入?yún)⒓纯伞?/p>
function getData(cb) { let val = 'a'; cb(val); } getData((data) => { console.log(data); // 'a' })
promise
使用promise來(lái)處理異步,主要就是利用resolve成功的回調(diào)函數(shù),reject失敗的回調(diào)函數(shù)。
let promiseFunc = new Promise((resolve, reject) => { let n = Math.random(); if (n >= 0.7) { resolve(n); } else { reject(`${n}小于0.7`) } }); promiseFunc.then((data) => { console.log(data); // 0.3小于0.7 })
async await
async: 把函數(shù)變成異步函數(shù)。wait是等待異步函數(shù)執(zhí)行完成。其中await一定要寫(xiě)在async里面
async function myTest() { return '我是測(cè)試數(shù)據(jù)' }; async function getData() { let val = await myTest(); console.log(val); // 我是測(cè)試數(shù)據(jù) }
到此這篇關(guān)于js獲取異步函數(shù)數(shù)據(jù)的實(shí)現(xiàn)的文章就介紹到這了,更多相關(guān)js獲取異步函數(shù) 內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
JavaScript編程開(kāi)發(fā)中的五個(gè)實(shí)用小技巧
下面的5點(diǎn)說(shuō)明確實(shí)不錯(cuò),提高性能與可讀性,大家可以根據(jù)需要選擇使用。2010-07-07關(guān)于BootStrap modal 在IOS9中不能彈出的解決方法(IOS 9 bootstrap modal ios
本文給大家介紹BootStrap modal 在IOS9中不能彈出的問(wèn)題以及bootstrap datepicker 在bootstrap modal中不顯示問(wèn)題的解決方案,非常不錯(cuò),需要的朋友參考下2016-12-12JavaScript取得gridview中獲取checkbox選中的值
這篇文章主要介紹了 js取得gridview中獲取checkbox選中的值,本文給大家分享兩段代碼片段,非常不錯(cuò),具有參考借鑒價(jià)值,需要的朋友可以參考下2017-07-07JavaScript數(shù)據(jù)結(jié)構(gòu)與算法之二叉樹(shù)實(shí)現(xiàn)查找最小值、最大值、給定值算法示例
這篇文章主要介紹了JavaScript數(shù)據(jù)結(jié)構(gòu)與算法之二叉樹(shù)實(shí)現(xiàn)查找最小值、最大值、給定值算法,涉及javascript二叉樹(shù)定義、賦值、遍歷、查找等相關(guān)操作技巧,需要的朋友可以參考下2019-03-038個(gè)JavaScript條件語(yǔ)句優(yōu)化小技巧分享
在日常的開(kāi)發(fā)中,我們經(jīng)常會(huì)編寫(xiě)一些條件語(yǔ)句,過(guò)多的?if...else會(huì)導(dǎo)致代碼難以理解和維護(hù),今天小編來(lái)分享幾個(gè)優(yōu)化條件語(yǔ)句的小技巧,希望對(duì)大家有所幫助2022-07-07有效的捕獲JavaScript焦點(diǎn)的方法小結(jié)
閱讀本文可理解并解決以下問(wèn)題 設(shè)置元素可獲得焦點(diǎn)以監(jiān)聽(tīng)鍵盤(pán)事件 某個(gè)元素明明設(shè)置了聚焦卻沒(méi)效果 聚焦時(shí)拋出異常的2009-10-10