js中異步函數async?function變同步函數的方法是什么

這篇文章主要講解了“js中異步函數async function變同步函數的方法是什么”，文中的講解內容簡單清晰，易于學習與理解，下面請大家跟著小編的思路慢慢深入，一起來研究和學習“js中異步函數async function變同步函數的方法是什么”吧！

js異步函數async function變同步函數入門

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

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

所以 promise 就突出了它的作用，目前程式執行在那個階段 結果是什么 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() 中得到了經過ajax請賦值后的全局變量 goodsInfo 的值，如果再有什么對 goodsInfo 的操作，在 .then 中進行即可。

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

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

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

// 定義規則
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(){
// 看這里面的代碼執行順序是不是跟同步函數簡直一模一樣
            await promiseFun("https://api-hmugo-web.itheima.net/api/public/v1/home/catitems");
            console.log(goodsInfo);
            data=goodsInfo;
            console.log(data)
            console.log(2);
     }
// 調用 asyns 函數
        asyncFuunc();
        console.log(1);
        console.log(goodsInfo);
    });
</script>

異步函數（async/await）

異步函數

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

• async

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

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

異步函數如果使用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 關鍵字可以暫停異步函數代碼的執行，等待期約解決。await 會暫停執行異步函數后面的代碼，讓出JS 運行時的執行線程。這個行為與生成器函數中的yield 關鍵字是一樣的。await 關鍵字同樣是嘗試 “解包” 對象的值，然后將這個值傳給表達式，再異步恢復異步函數的執行。

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

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

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

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

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

    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）調用異步函數foo()；
    （3）（在foo()中）打印2；
    （4）（在foo()中）await關鍵字暫停執行，為立即可用的值null向消息隊列中添加一個任務；
    （5）foo()退出；
    （6）打印3；
    （7）同步線程的代碼執行完畢；
    （8）JavaScript運行時從消息隊列中取出任務，恢復異步函數執行；
    （9）（在foo()中）恢復執行，await取得null值（這里并沒有使用）；
    （10）（在foo()中）打印4；
    （11）foo()返回。

異步函數策略

• 實現sleep()

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

有了異步函數之后，就不一樣了。一個簡單的箭頭函數就可以實現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  任務隊列執行，時間不一定

• 利用平行執行

• 串行執行期約

• 棧追蹤與內存管理

注意：

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

感謝各位的閱讀，以上就是“js中異步函數async function變同步函數的方法是什么”的內容了，經過本文的學習后，相信大家對js中異步函數async function變同步函數的方法是什么這一問題有了更深刻的體會，具體使用情況還需要大家實踐驗證。這里是億速云，小編將為大家推送更多相關知識點的文章，歡迎關注！