亚洲乱码中文字幕综合,中国熟女仑乱hd,亚洲精品乱拍国产一区二区三区,一本大道卡一卡二卡三乱码全集资源,又粗又黄又硬又爽的免费视频

js中異步函數(shù)async function變同步函數(shù)的簡單入門

 更新時間：2023年04月24日 10:17:32   作者：321茄子  
這篇文章主要介紹了js中異步函數(shù)async function變同步函數(shù)的簡單入門，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教

js異步函數(shù)async function變同步函數(shù)入門

js 中異步函數(shù)之所以特別，一個重要的原因就是它執(zhí)行完成的時間、耗費的時間靠人的主觀是不得而知的。

所以不能靠設置定時函數(shù)來讓上一個程式完成之后來進行下一個函數(shù)。

接上次的文章：js 異步獲取到的數(shù)據(jù) 到底能不能 賦值給一個全局變量

所以 promise 就突出了它的作用，目前程式執(zhí)行在那個階段 結果是什么 promise 知道。新建一個 promise 對象。

new Promise(function (resolve, reject) {
    // 要做的事情...
});

嘗試一個 ajix 請求

<script>
    var goodsInfo = {};
    $(document).ready(function(){
    //    使用Promise
    new Promise(function (resolve,reject) {
            $.ajax({url:"https://api-hmugo- web.itheima.net/api/public/v1/home/catitems",success:function(result){
                    goodsInfo = result;
                    resolve(goodsInfo);
                    console.log(goodsInfo);
                }});
        }).then(function () {
            console.log(goodsInfo);
        })
        console.log(1);
        console.log(goodsInfo);
    });
</script>

看是不是在 .then() 中得到了經(jīng)過ajax請賦值后的全局變量 goodsInfo 的值，如果再有什么對 goodsInfo 的操作，在 .then 中進行即可。

ajax在項目會頻繁使用，將其封裝成一個函數(shù)會更方便

<script>
 
    var goodsInfo = {};
    $(document).ready(function(){
 
// 封裝一個 promise 函數(shù)，在promiise對象前面多加了一個return
        function promiseFun (url){
            return new Promise(function (resolve,reject) {
                $.ajax({url:url,success:function(result){
                        goodsInfo = result;
                        resolve(goodsInfo);
                        console.log(goodsInfo);
                    }});
            })
        }
// 調(diào)用函數(shù)
        promiseFun("https://api-hmugo-web.itheima.net/api/public/v1/home/catitems").then(function () {
            console.log(goodsInfo);
        })
        console.log(1);
        console.log(goodsInfo);
    });
</script>

結果依然一樣。調(diào)用的時候是不是又簡約一點。 async function 感覺是又進了異步

// 定義規(guī)則
async function asyncFunc() {
    // await 后面必須是定義過的 promise function 
    await myfunction();
    await youfunction();
    await shefunction();
    somefunction();
    xxxxxx;
    
}
asyncFunc();
<script>
    var goodsInfo = {};
    var data ={};
    $(document).ready(function(){
// 先定義一個 promise function
        function promiseFun (url){
            return new Promise(function (resolve,reject) {
                $.ajax({url:url,success:function(result){
                        goodsInfo = result;
                        resolve(goodsInfo);
                        console.log(goodsInfo);
                    }});
            })
        }
// 在定義一個 asyns function 
     async function asyncFuunc(){
// 看這里面的代碼執(zhí)行順序是不是跟同步函數(shù)簡直一模一樣
            await promiseFun("https://api-hmugo-web.itheima.net/api/public/v1/home/catitems");
            console.log(goodsInfo);
            data=goodsInfo;
            console.log(data)
            console.log(2);
     }
// 調(diào)用 asyns 函數(shù)
        asyncFuunc();
        console.log(1);
        console.log(goodsInfo);
    });
</script>

異步函數(shù)（async/await）

異步函數(shù)

異步函數(shù)，也稱為"async/await" (語法關鍵字)，是ES6 期約模式在ECMAScript 函數(shù)中的應用。async/await 是ES8 規(guī)范新增的。為了解決利用異步結構組織代碼的問題。

  • async

async 關鍵字用于聲明異步函數(shù)。這個關鍵字可以用在函數(shù)聲明、函數(shù)表達式、箭頭函數(shù)和方法上：

? ? async function foo() {} ??
? ? let bar = async function() {}; ?
? ? let baz = async() => {}; ??
? ? class Qux { ??
? ? ? ? async qux() {} ??
? ? }

異步函數(shù)如果使用return 返回了值（沒有return 則會返回undefined）,這個值會被Promise.resolve() 包裝成一個期約對象。

? ? async function foo(){
? ? ? ? console.log(1)
? ? }

? ? console.log(foo()); //promise {<fulfilled>:undefined}
? ? foo().then(console.log) //undefined
? ? console.log(2)
? ? //1
? ? //2
? ? //undefined
  • await

await 關鍵字可以暫停異步函數(shù)代碼的執(zhí)行，等待期約解決。await 會暫停執(zhí)行異步函數(shù)后面的代碼，讓出JS 運行時的執(zhí)行線程。這個行為與生成器函數(shù)中的yield 關鍵字是一樣的。await 關鍵字同樣是嘗試 “解包” 對象的值，然后將這個值傳給表達式，再異步恢復異步函數(shù)的執(zhí)行。

await 關鍵字必須在異步函數(shù)中使用；異步函數(shù)的特質(zhì)不會擴展到嵌套函數(shù)。否則會拋出SyntaxError;

async function foo(){
? ? await Promise.resolve(3);
}
foo();

async/await 中真正起作用的是await。異步函數(shù)如果不包含await 關鍵字，其執(zhí)行基本上跟普通函數(shù)沒什么區(qū)別。

JavaScript 運行時在碰到await 關鍵字時，會記錄在哪里暫停執(zhí)行。等到await 右邊的值可用了，js運行時會向消息隊列中推送一個任務，這個任務會恢復異步函數(shù)的執(zhí)行。

因此，即使await 后面跟著一個立即可用的值，函數(shù)的其他部分也會被異步求值。

? ? async function foo() {?
? ? ? ? console.log(2); ??
? ? ? ? await null;
? ? ? ? console.log(4); ?
? ? } ??
? ? console.log(1);
? ? foo();
? ? console.log(3);
? ? // 1
? ? // 2
? ? // 3
? ? // 4
? ??
? ? 控制臺中輸出結果的順序很好地解釋了運行時的工作過程：
? ? （1）打印1；
? ? （2）調(diào)用異步函數(shù)foo()；
? ? （3）（在foo()中）打印2；
? ? （4）（在foo()中）await關鍵字暫停執(zhí)行，為立即可用的值null向消息隊列中添加一個任務；
? ? （5）foo()退出；
? ? （6）打印3；
? ? （7）同步線程的代碼執(zhí)行完畢；
? ? （8）JavaScript運行時從消息隊列中取出任務，恢復異步函數(shù)執(zhí)行；
? ? （9）（在foo()中）恢復執(zhí)行，await取得null值（這里并沒有使用）；
? ? （10）（在foo()中）打印4；
? ? （11）foo()返回。

異步函數(shù)策略

  • 實現(xiàn)sleep()

很多人在剛開始學習JavaScript時，想找到一個類似Java中Thread.sleep()之類的函數(shù)，好在程序中加入非阻塞的暫停。以前，這個需求基本上都通過setTimeout()利用JavaScript運行時的行為來實現(xiàn)的。

有了異步函數(shù)之后，就不一樣了。一個簡單的箭頭函數(shù)就可以實現(xiàn)sleep()：

?async function sleep(delay) {
? ? ? ? return new Promise((resolve) => setTimeout(resolve, delay));
? ? }

? ? async function sleepfoo(){
? ? ? ? const t0 = Date.now();
? ? ? ? await sleep(2000);
? ? ? ? const t1 = Date.now();
? ? ? ? console.log(t1 - t0);
? ? }
? ? sleepfoo()
? ? //2002 ?任務隊列執(zhí)行，時間不一定
  • 利用平行執(zhí)行
  • 串行執(zhí)行期約
  • 棧追蹤與內(nèi)存管理

注意：

異步函數(shù)是將期約應用于JavaScript函數(shù)的結果。異步函數(shù)可以暫停執(zhí)行，而不阻塞主線程。無論是編寫基于期約的代碼，還是組織串行或平行執(zhí)行的異步代碼，使用異步函數(shù)都非常得心應手。異步函數(shù)可以說是現(xiàn)代JavaScript工具箱中最重要的工具之一。

總結

以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。

相關文章

最新評論