Promise 与 async/await 简介

An async function is a function declared with the async keyword, and the await keyword is permitted within them.

The async and await keywords enable asynchronous, promise-based behavior to be written in a cleaner style, avoiding the need to explicitly configure promise chains.

异步-先执行不一定先完成

原本这篇的标题是想写 JavaScript 异步简介 的，但是这个标题的范围实在太广了，我也没有信心写好。

所以考虑了一下，缩小范围。从简单实践的角度来介绍吧。

前面也写过，JavaScript 是异步的，AJAX 与 Fetch 简介 中也有示例。

不过这里还是再给个例子吧。

从代码顺序来看：

• 发送 AJAX 前输出内容；
• 使用 AJAX 获取 json 数据后输出内容；
• 发送 AJAX 后输出内容；

Live Editor

() => { const handleClick = () => { const div = document.getElementById('div_1'); const ajaxGetData = () => { const xhr = new XMLHttpRequest(); const url = '/json/ajax.json' xhr.onreadystatechange = () => { if (xhr.readyState == 4 && xhr.status == 200) { div.innerHTML += '<br />' + xhr.responseText; } }; xhr.open('GET', url, true); xhr.send(); } div.innerHTML = 'AJAX 开始发送！' ajaxGetData(); div.innerHTML += '<br />' + 'AJAX 还在接收！'; }; return ( <BrowserWindow url="https://iceyblacktea.now.sh/jsx-live"> <button onClick={handleClick}>点我试试！</button> <div id='div_1'>我会变身哦~</div> </BrowserWindow> ); }

() => {
    const handleClick = () => {
        const div = document.getElementById('div_1');

        const ajaxGetData = () => {
            const xhr = new XMLHttpRequest();
            const url = '/json/ajax.json'

            xhr.onreadystatechange = () => {
                if (xhr.readyState == 4 && xhr.status == 200) {
                    div.innerHTML += '<br />' + xhr.responseText;
                }
            };

            xhr.open('GET', url, true);

            xhr.send();
        }

        div.innerHTML = 'AJAX 开始发送！'
        
        ajaxGetData();
        
        div.innerHTML += '<br />' + 'AJAX 还在接收！';
    };
    

    return (
        <BrowserWindow url="https://iceyblacktea.now.sh/jsx-live">
            <button onClick={handleClick}>点我试试！</button>
            <div id='div_1'>我会变身哦~</div>
        </BrowserWindow>
    );
}

Result

Loading...

从顺序来看，第三个步骤是最晚的；但是从结果上看，它在第二个步骤前先完成了。

这里体现正是的 JavaScript 的异步特性。

获取网络数据的执行时间是不确定的，与其他普通操作相比，通常会消耗更多时间。

所以此时代码执行 AJAX 等待网络传输时不会阻塞，会先去完成之后的步骤；

等传输结束后，JavaScript 再回去执行获取数据之后的操作。

JavaScript 通常应用于前端，异步能很好的避免因网络传输和单线程特性而产生的阻塞。

不过对于不熟悉异步编程的初学者来说，可能会产生许多不友好的bug。

回调-完成后再执行

额，最近忙着弄别的先，先欠着。。。