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

js獲取異步函數(shù)數(shù)據(jù)的實現(xiàn)

 更新時間:2023年02月24日 08:59:31   作者:元子不圓呀  
本文主要介紹了js獲取異步函數(shù)數(shù)據(jù)的實現(xiàn),文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小編來一起學習學習吧

異步函數(shù)是js中經(jīng)常會用到的,它的作用無非就是進行一些異步的操作(處理數(shù)據(jù))。那么,常見的異步函數(shù)有哪些呢,我們一般又是如何獲取異步函數(shù)的數(shù)據(jù)呢?今天這篇文章就是圍繞這個問題去寫的。

異步函數(shù)

一般正常情況下,js中的函數(shù)是一個一個地按照順序來完成的。但是異步函數(shù)可以改變執(zhí)行順序。不過異步任務必須在同步任務執(zhí)行結束之后,從任務隊列中依次取出執(zhí)行。

常見的異步函數(shù)一共有四類:

  • 回調(diào)函數(shù)
  • promise函數(shù)
  • Generator函數(shù)
  • async/await函數(shù)

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

回調(diào)函數(shù)一般是作為某個函數(shù)的入?yún)?,然后在函?shù)內(nèi)部執(zhí)行這個回調(diào)函數(shù)。常見的回調(diào)函數(shù)有ajax,setTimeouut定時器類,dom事件回調(diào)等。

testA(cb) {
cb();
}
setTimeout(() => {
console.log('這是一個回調(diào)函數(shù)')
}, 100)

缺點: 不能try catch捕獲錯誤, 不能直接return。

promise

promise函數(shù)是一種特殊的異步函數(shù),里面包含三種狀態(tài):pending、fulfilled(resolved)、rejected。pending是promise的初始狀態(tài),resolved表示執(zhí)行完成且成功的狀態(tài),rejected表示執(zhí)行完成且失敗的狀態(tài)。三個狀態(tài)不可逆轉

Promise本身是同步,then的內(nèi)容是異步:

let promiseFunc = new Promise((resolve, reject) => {
  // 執(zhí)行同步代碼
  resolve();
}).then((res) => {
  console.log(res)
},(err) => {
  console.log(err);
})

Generator函數(shù)

Generator 是一個可以暫停執(zhí)行(分段執(zhí)行)的函數(shù),函數(shù)名前面要加星號,是一個狀態(tài)機,封裝了多個內(nèi)部狀態(tài)。

function *myTest() {
  yield 'I',
  yield 'am',
  yield 'queen'
}

async/await函數(shù)

async修飾符加在函數(shù)前面,返回一個promise,可以使用then添加回調(diào)函數(shù)。 await后跟著一個promise或者一個原始類型的值(會自動轉成立即 resolved 的 Promise 對象),等待resolve的結果。任何一個await后的Promise發(fā)生reject,整個aysnc都會中斷,需要try{}catch(err){}來捕獲錯誤。

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ù)的這種很簡單,就是直接將數(shù)據(jù)傳進回調(diào)函數(shù)里作為入?yún)⒓纯伞?/p>

function getData(cb) {
  let val = 'a';
  cb(val);
}

getData((data) => {
  console.log(data);   // 'a'
})

promise

使用promise來處理異步,主要就是利用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一定要寫在async里面

async function myTest() {
  return '我是測試數(shù)據(jù)'
};
async function getData() {
  let val = await myTest();
  console.log(val);   // 我是測試數(shù)據(jù)
}

到此這篇關于js獲取異步函數(shù)數(shù)據(jù)的實現(xiàn)的文章就介紹到這了,更多相關js獲取異步函數(shù) 內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家!

相關文章

  • webpack動態(tài)加載與打包方式

    webpack動態(tài)加載與打包方式

    webpack有兩種組織模塊依賴的方式,同步和異步,這篇文章主要介紹了webpack動態(tài)加載與打包方式,本文結合實例代碼給大家介紹的非常詳細,需要的朋友可以參考下
    2023-02-02
  • avalonjs制作響應式瀑布流特效

    avalonjs制作響應式瀑布流特效

    瀑布流主要應用在圖片展示頁面上。如果有一大批圖片需要展示,原始圖片尺寸不一致,又希望每張圖片都能不剪裁,完整顯示,那么就要給圖片規(guī)定一個寬度,解放它們的高度。利用網(wǎng)頁高度不限這個特性,充分利用頁面的空間,盡可能的展示多的圖片。下面我們就來詳細探討下
    2015-05-05
  • JavaScript編程開發(fā)中的五個實用小技巧

    JavaScript編程開發(fā)中的五個實用小技巧

    下面的5點說明確實不錯,提高性能與可讀性,大家可以根據(jù)需要選擇使用。
    2010-07-07
  • Webpack?ECMAScript?模塊詳解

    Webpack?ECMAScript?模塊詳解

    ECMAScript 模塊(ESM)是在 Web 中使用模塊的規(guī)范, 所有現(xiàn)代瀏覽器均支持此功能,同時也是在 Web 中編寫模塊化代碼的推薦方式,這篇文章主要介紹了Webpack?ECMAScript?模塊,需要的朋友可以參考下
    2023-12-12
  • 關于BootStrap modal 在IOS9中不能彈出的解決方法(IOS 9 bootstrap modal ios 9 noticework)

    關于BootStrap modal 在IOS9中不能彈出的解決方法(IOS 9 bootstrap modal ios

    本文給大家介紹BootStrap modal 在IOS9中不能彈出的問題以及bootstrap datepicker 在bootstrap modal中不顯示問題的解決方案,非常不錯,需要的朋友參考下
    2016-12-12
  • JavaScript取得gridview中獲取checkbox選中的值

    JavaScript取得gridview中獲取checkbox選中的值

    這篇文章主要介紹了 js取得gridview中獲取checkbox選中的值,本文給大家分享兩段代碼片段,非常不錯,具有參考借鑒價值,需要的朋友可以參考下
    2017-07-07
  • JavaScript數(shù)據(jù)結構與算法之二叉樹實現(xiàn)查找最小值、最大值、給定值算法示例

    JavaScript數(shù)據(jù)結構與算法之二叉樹實現(xiàn)查找最小值、最大值、給定值算法示例

    這篇文章主要介紹了JavaScript數(shù)據(jù)結構與算法之二叉樹實現(xiàn)查找最小值、最大值、給定值算法,涉及javascript二叉樹定義、賦值、遍歷、查找等相關操作技巧,需要的朋友可以參考下
    2019-03-03
  • Javascript的字符串方法詳解

    Javascript的字符串方法詳解

    這篇文章主要介紹了Javascript字符串方法詳解的相關資料,在平時工作中經(jīng)常會用到的,非常不錯,需要的朋友可以參考下,希望能夠給你帶來幫助
    2021-09-09
  • 8個JavaScript條件語句優(yōu)化小技巧分享

    8個JavaScript條件語句優(yōu)化小技巧分享

    在日常的開發(fā)中,我們經(jīng)常會編寫一些條件語句,過多的?if...else會導致代碼難以理解和維護,今天小編來分享幾個優(yōu)化條件語句的小技巧,希望對大家有所幫助
    2022-07-07
  • 有效的捕獲JavaScript焦點的方法小結

    有效的捕獲JavaScript焦點的方法小結

    閱讀本文可理解并解決以下問題 設置元素可獲得焦點以監(jiān)聽鍵盤事件 某個元素明明設置了聚焦卻沒效果 聚焦時拋出異常的
    2009-10-10

最新評論