async & await & promise

最新推荐文章于 2025-09-11 14:12:58 发布

转载最新推荐文章于 2025-09-11 14:12:58 发布 · 70 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/xgqfrms/p/10116652.html

文章标签：

#json

本文深入探讨了异步编程技巧，包括async/await与Promise的使用，并通过实际示例展示了如何运用Fetch API获取远程数据，同时处理JSON响应及错误情况。

async & await & promise

ES7


const f = async () => {
    return 1;
};

 
f().then(value => console.log(value)); 
// 1
// Promise {<resolved>: undefined}

f();
// Promise {<resolved>: 1}

chrome://extensions/


        async getNews() {
            try {
                const response = await fetch(`https://raw.githubusercontent.com/darkreader/darkreader.org/master/src/blog/posts.json?nocache=${Date.now()}`, { cache: 'no-cache' });
                const $news = await response.json();
                return new Promise((resolve, reject) => {
                    chrome.storage.sync.get({ readNews: [] }, ({ readNews }) => {
                        const news = $news.map(({ id, date, headline }) => {
                            const url = getBlogPostURL(id);
                            const read = this.isRead(id, readNews);
                            return { id, date, headline, url, read };
                        });
                        for (let i = 0; i < news.length; i++) {
                            const date = new Date(news[i].date);
                            if (isNaN(date.getTime())) {
                                reject(new Error(`Unable to parse date ${date}`));
                                return;
                            }
                        }
                        resolve(news);
                    });
                });
            }
            catch (err) {
                console.error(err);
                return null;
            }
        }

Fetch API & Async Await

practical demo

const fetchJSON = (url = ``) => {
    return fetch(url,
        {
            method: "GET",
            // mode: "no-cors",
            mode: "cors",
            credentials: "same-origin",
            headers: {
                "Content-Type": "application/json; charset=utf-8",
            },
        })
        .then(res => res.json())
        .then(
            (json) => {
                return json;
            }
        )
        .catch(err => console.log(`fetch error`, err));
};

// async / await
async function getDatas(url = ``) {
    try {
        return await fetchJSON(url);
    } catch (err) {
        console.error("getDatas error:\n", err);
    }
}

转载于:https://www.cnblogs.com/xgqfrms/p/10116652.html