JavaScript 寮傛缂栫▼璇﹁В锛氫粠鍥炶皟鍒?async/await

JavaScript 鏄竴闂ㄥ崟绾跨▼璇█锛岃繖鎰忓懗鐫€瀹冧竴娆″彧鑳芥墽琛屼竴涓换鍔°€傜劧鑰岋紝鍦ㄥ疄闄呭簲鐢ㄤ腑锛屾垜浠粡甯搁渶瑕佸鐞嗗紓姝ユ搷浣滐紝濡傜綉缁滆姹傘€佹枃浠惰鍐欍€佸畾鏃跺櫒绛夈€備负浜嗗鐞嗚繖浜涘紓姝ユ搷浣滐紝JavaScript 鍙戝睍鍑轰簡澶氱寮傛缂栫▼妯″紡锛屼粠鏈€鍒濈殑鍥炶皟鍑芥暟锛屽埌 Promise锛屽啀鍒扮幇鍦ㄧ殑 async/await銆?/p>

1. 鍥炶皟鍑芥暟锛圕allbacks锛?/h2>

鍥炶皟鍑芥暟鏄渶鍘熷鐨勫紓姝ョ紪绋嬫柟寮忥紝瀹冩槸涓€涓綔涓哄弬鏁颁紶閫掔粰鍙︿竴涓嚱鏁扮殑鍑芥暟锛屽湪寮傛鎿嶄綔瀹屾垚鍚庤璋冪敤銆?/p>

function fetchData(callback) {
    setTimeout(() => {
        const data = { name: 'John', age: 30 };
        callback(data);
    }, 1000);
}

fetchData((data) => {
    console.log('鑾峰彇鍒版暟鎹?', data);
});

鍥炶皟鍑芥暟鐨勪紭鐐规槸绠€鍗曠洿鎺ワ紝浣嗗綋澶勭悊澶氫釜寮傛鎿嶄綔鏃讹紝瀹规槗瀵艰嚧鍥炶皟鍦扮嫳锛圕allback Hell锛夛細

fetchUser((user) => {
    fetchPosts(user.id, (posts) => {
        fetchComments(posts[0].id, (comments) => {
            console.log(comments);
        });
    });
});

2. Promise

Promise 鏄?ES6 寮曞叆鐨勪竴绉嶅紓姝ョ紪绋嬭В鍐虫柟妗堬紝瀹冧唬琛ㄤ竴涓紓姝ユ搷浣滅殑鏈€缁堝畬鎴愶紙鎴栧け璐ワ級鍙婂叾缁撴灉鍊笺€?/p>

function fetchData() {
    return new Promise((resolve, reject) => {
        setTimeout(() => {
            const data = { name: 'John', age: 30 };
            resolve(data);
            // 鎴栬€呭湪澶辫触鏃?reject(new Error('鑾峰彇鏁版嵁澶辫触'));
        }, 1000);
    });
}

fetchData()
    .then((data) => {
        console.log('鑾峰彇鍒版暟鎹?', data);
        return fetchMoreData(data);
    })
    .then((moreData) => {
        console.log('鑾峰彇鍒版洿澶氭暟鎹?', moreData);
    })
    .catch((error) => {
        console.error('鍙戠敓閿欒:', error);
    });

Promise 閫氳繃閾惧紡璋冪敤瑙ｅ喅浜嗗洖璋冨湴鐙辩殑闂锛屼娇浠ｇ爜鏇村姞娓呮櫚鍙銆?/p>

3. async/await

async/await 鏄?ES2017 寮曞叆鐨勮娉曠硸锛屽畠鍩轰簬 Promise锛屼娇寮傛浠ｇ爜鐪嬭捣鏉ユ洿鍍忓悓姝ヤ唬鐮侊紝杩涗竴姝ユ彁楂樹簡浠ｇ爜鐨勫彲璇绘€с€?/p>

async function getData() {
    try {
        const data = await fetchData();
        console.log('鑾峰彇鍒版暟鎹?', data);
        const moreData = await fetchMoreData(data);
        console.log('鑾峰彇鍒版洿澶氭暟鎹?', moreData);
        return moreData;
    } catch (error) {
        console.error('鍙戠敓閿欒:', error);
        throw error;
    }
}

getData();

3.1 async 鍑芥暟

浣跨敤 async 鍏抽敭瀛楀０鏄庣殑鍑芥暟浼氳繑鍥炰竴涓?Promise銆傚鏋滃嚱鏁拌繑鍥炰竴涓€硷紝Promise 浼氳瑙ｆ瀽涓鸿鍊硷紱濡傛灉鍑芥暟鎶涘嚭寮傚父锛孭romise 浼氳鎷掔粷銆?/p>

3.2 await 琛ㄨ揪寮?/h3>

await 琛ㄨ揪寮忓彧鑳藉湪 async 鍑芥暟涓娇鐢紝瀹冧細鏆傚仠 async 鍑芥暟鐨勬墽琛岋紝绛夊緟 Promise 瑙ｆ瀽鎴栨嫆缁濓紝鐒跺悗缁х画鎵ц async 鍑芥暟骞惰繑鍥炶В鏋愬€笺€?/p>

4. 寮傛缂栫▼鏈€浣冲疄璺?/h2>

1. 浣跨敤 async/await锛氬湪鐜颁唬 JavaScript 涓紝浼樺厛浣跨敤 async/await锛屽洜涓哄畠浣夸唬鐮佹洿鏄撹銆佹洿鏄撶淮鎶ゃ€?/li>
2. 澶勭悊閿欒锛氬缁堜娇鐢?try/catch 鍧楁崟鑾?async/await 涓殑閿欒銆?/li>
3. 骞惰鎵ц锛氬浜庣浉浜掔嫭绔嬬殑寮傛鎿嶄綔锛屼娇鐢?Promise.all() 骞惰鎵ц浠ユ彁楂樻€ц兘銆?/li>
4. 閬垮厤闃诲锛氫笉瑕佸湪涓荤嚎绋嬩腑鎵ц鑰楁椂鎿嶄綔锛屼娇鐢?Web Workers 澶勭悊瀵嗛泦璁＄畻銆?/li>

5. 瀹為檯搴旂敤绀轰緥

涓嬮潰鏄竴涓娇鐢?async/await 澶勭悊缃戠粶璇锋眰鐨勫疄闄呯ず渚嬶細

async function getUserData(userId) {
    try {
        // 骞惰鑾峰彇鐢ㄦ埛淇℃伅鍜屽笘瀛?
        const [user, posts] = await Promise.all([
            fetch(`https://api.example.com/users/${userId}`).then(res => res.json()),
            fetch(`https://api.example.com/users/${userId}/posts`).then(res => res.json())
        ]);
        
        // 鑾峰彇姣忎釜甯栧瓙鐨勮瘎璁?
        const postsWithComments = await Promise.all(
            posts.map(async post => {
                const comments = await fetch(`https://api.example.com/posts/${post.id}/comments`)
                    .then(res => res.json());
                return { ...post, comments };
            })
        );
        
        return { user, posts: postsWithComments };
    } catch (error) {
        console.error('鑾峰彇鐢ㄦ埛鏁版嵁澶辫触:', error);
        throw error;
    }
}

// 浣跨敤鍑芥暟
getUserData(1)
    .then(data => console.log('鐢ㄦ埛鏁版嵁:', data))
    .catch(error => console.error('閿欒:', error));

6. 鎬荤粨

JavaScript 鐨勫紓姝ョ紪绋嬪彂灞曠粡鍘嗕簡浠庡洖璋冨嚱鏁板埌 Promise锛屽啀鍒?async/await 鐨勬紨鍙樿繃绋嬨€傛瘡涓€娆℃紨鍙橀兘浣垮紓姝ヤ唬鐮佸彉寰楁洿鍔犵畝娲併€佸彲璇诲拰鍙淮鎶ゃ€?/p>

• 鍥炶皟鍑芥暟锛氱畝鍗曠洿鎺ワ紝浣嗗鏄撳鑷村洖璋冨湴鐙便€?/li>
• Promise锛氶€氳繃閾惧紡璋冪敤瑙ｅ喅浜嗗洖璋冨湴鐙憋紝浣夸唬鐮佹洿鍔犳竻鏅般€?/li>
• async/await锛氬熀浜?Promise锛屼娇寮傛浠ｇ爜鐪嬭捣鏉ュ儚鍚屾浠ｇ爜锛岃繘涓€姝ユ彁楂樹簡鍙鎬с€?/li>

鍦ㄧ幇浠?JavaScript 寮€鍙戜腑锛屽缓璁紭鍏堜娇鐢?async/await 璇硶锛屽苟缁撳悎 Promise.all() 绛夋柟娉曚紭鍖栧紓姝ユ搷浣滅殑鎬ц兘銆?/p>