{"id":294,"date":"2026-03-19T22:33:27","date_gmt":"2026-03-19T14:33:27","guid":{"rendered":"https:\/\/www.resilence.cn\/?p=294"},"modified":"2026-03-19T22:33:27","modified_gmt":"2026-03-19T14:33:27","slug":"day-25-%e5%bc%82%e6%ad%a5%e7%bc%96%e7%a8%8bpromise","status":"publish","type":"post","link":"https:\/\/www.resilence.cn\/?p=294","title":{"rendered":"Day-25-\u5f02\u6b65\u7f16\u7a0bPromise"},"content":{"rendered":"

Day 25: \u5f02\u6b65\u7f16\u7a0bPromise<\/h1>\n
\n

\ud83d\udcc5 \u65e5\u671f: 2026\u5e7403\u670818\u65e5
\n\ud83c\udfaf \u5b66\u4e60\u76ee\u6807: \u6df1\u5165\u7406\u89e3\u5f02\u6b65\u7f16\u7a0b\u4e0e Promise\uff0c\u638c\u63e1\u5f02\u6b65\u64cd\u4f5c\u7684\u6700\u4f73\u5b9e\u8df5
\n\u23f1\ufe0f \u9884\u8ba1\u7528\u65f6: 2-3 \u5c0f\u65f6
\n\ud83d\udcc2 \u5206\u7c7b: 10-\u73b0\u4ee3JavaScript<\/p>\n<\/blockquote>\n

\n

\ud83c\udfaf \u5b66\u4e60\u76ee\u6807<\/h2>\n

\u901a\u8fc7\u4eca\u5929\u7684\u5b66\u4e60\uff0c\u4f60\u5c06\uff1a<\/p>\n

    \n
  1. \u7406\u89e3\u5f02\u6b65\u7f16\u7a0b\u6a21\u578b<\/strong>\uff1a\u4e8b\u4ef6\u5faa\u73af\u3001\u56de\u8c03\u961f\u5217<\/li>\n
  2. \u638c\u63e1 Promise \u7528\u6cd5<\/strong>\uff1a\u521b\u5efa\u3001\u94fe\u5f0f\u8c03\u7528\u3001\u9519\u8bef\u5904\u7406<\/li>\n
  3. \u5b66\u4f1a async\/await<\/strong>\uff1a\u5f02\u6b65\u4ee3\u7801\u7684\u540c\u6b65\u5199\u6cd5<\/li>\n
  4. \u5b9e\u8df5\u5e76\u884c\u5904\u7406<\/strong>\uff1aPromise.all\u3001race\u3001allSettled<\/li>\n
  5. \u5e94\u7528\u6700\u4f73\u5b9e\u8df5<\/strong>\uff1a\u9519\u8bef\u5904\u7406\u3001\u6027\u80fd\u4f18\u5316<\/li>\n<\/ol>\n
    \n

    \ud83d\udca1 \u6838\u5fc3\u6982\u5ff5<\/h2>\n

    1. \u540c\u6b65 vs \u5f02\u6b65<\/h3>\n
    \/\/ \u540c\u6b65\u4ee3\u7801\uff1a\u963b\u585e\u6267\u884c\nconsole.log('1');\nconst data = readFile('data.txt');  \/\/ \u963b\u585e\uff0c\u7b49\u5f85\u6587\u4ef6\u8bfb\u53d6\u5b8c\u6210\nconsole.log('2');\nconsole.log(data);\n\/\/ \u8f93\u51fa\uff1a1 -> \u6570\u636e -> 2\n\n\/\/ \u5f02\u6b65\u4ee3\u7801\uff1a\u975e\u963b\u585e\u6267\u884c\nconsole.log('1');\nreadFile('data.txt', (err, data) => {\n    console.log(data);\n});\nconsole.log('2');\n\/\/ \u8f93\u51fa\uff1a1 -> 2 -> \u6570\u636e\n<\/code><\/pre>\n
    2. \u56de\u8c03\u51fd\u6570\u7684\u95ee\u9898<\/h3>\n
    \/\/ \u56de\u8c03\u5730\u72f1\uff08Callback Hell\uff09\ngetData(id, (data) => {\n    getMoreData(data.id, (moreData) => {\n        getEvenMoreData(moreData.id, (evenMoreData) => {\n            \/\/ \u7ee7\u7eed\u5d4c\u5957...\n        });\n    });\n});\n<\/code><\/pre>\n
    3. Promise \u57fa\u7840<\/h3>\n
    \/\/ \u521b\u5efa Promise\nconst promise = new Promise((resolve, reject) => {\n    \/\/ \u5f02\u6b65\u64cd\u4f5c\n    const success = true;\n    \n    if (success) {\n        resolve('\u64cd\u4f5c\u6210\u529f');  \/\/ \u6210\u529f\u65f6\u8c03\u7528\n    } else {\n        reject('\u64cd\u4f5c\u5931\u8d25');   \/\/ \u5931\u8d25\u65f6\u8c03\u7528\n    }\n});\n\n\/\/ \u4f7f\u7528 Promise\npromise\n    .then(result => console.log(result))\n    .catch(error => console.error(error));\n<\/code><\/pre>\n
    \n
    \ud83d\udee0\ufe0f API \u51fd\u6570\u8be6\u89e3<\/h2>\n
    1. Promise \u6784\u9020\u51fd\u6570<\/h3>\n
    const myPromise = new Promise((resolve, reject) => {\n    \/\/ executor \u51fd\u6570\uff1a\u6267\u884c\u5f02\u6b65\u64cd\u4f5c\n    \/\/ resolve\uff1a\u6210\u529f\u65f6\u8c03\u7528\n    \/\/ reject\uff1a\u5931\u8d25\u65f6\u8c03\u7528\n    \n    setTimeout(() => {\n        const success = Math.random() > 0.5;\n        if (success) {\n            resolve('\u6570\u636e\u52a0\u8f7d\u6210\u529f');\n        } else {\n            reject(new Error('\u6570\u636e\u52a0\u8f7d\u5931\u8d25'));\n        }\n    }, 1000);\n});\n<\/code><\/pre>\n
    2. Promise \u5b9e\u4f8b\u65b9\u6cd5<\/h3>\n
    \/\/ then()\uff1a\u5904\u7406\u6210\u529f\u72b6\u6001\npromise.then(value => {\n    console.log('\u6210\u529f:', value);\n    return value + 1;  \/\/ \u8fd4\u56de\u503c\u4f20\u9012\u7ed9\u4e0b\u4e00\u4e2a then\n}).then(newValue => {\n    console.log('\u65b0\u503c:', newValue);\n});\n\n\/\/ catch()\uff1a\u5904\u7406\u5931\u8d25\u72b6\u6001\npromise.catch(error => {\n    console.error('\u9519\u8bef:', error.message);\n});\n\n\/\/ finally()\uff1a\u65e0\u8bba\u6210\u529f\u5931\u8d25\u90fd\u6267\u884c\npromise.finally(() => {\n    console.log('\u6e05\u7406\u8d44\u6e90');\n});\n<\/code><\/pre>\n
    3. Promise \u9759\u6001\u65b9\u6cd5<\/h3>\n
    \/\/ Promise.all\uff1a\u6240\u6709 Promise \u90fd\u6210\u529f\u624d\u6210\u529f\nconst p1 = Promise.resolve(1);\nconst p2 = Promise.resolve(2);\nconst p3 = Promise.resolve(3);\n\nPromise.all([p1, p2, p3])\n    .then(values => {\n        console.log(values);  \/\/ [1, 2, 3]\n    })\n    .catch(error => {\n        console.error('\u81f3\u5c11\u4e00\u4e2a\u5931\u8d25:', error);\n    });\n\n\/\/ Promise.race\uff1a\u7b2c\u4e00\u4e2a\u5b8c\u6210\u7684 Promise \u7ed3\u679c\nconst fast = new Promise(resolve => setTimeout(() => resolve('\u5feb'), 100));\nconst slow = new Promise(resolve => setTimeout(() => resolve('\u6162'), 200));\n\nPromise.race([fast, slow])\n    .then(value => console.log(value));  \/\/ '\u5feb'\n\n\/\/ Promise.allSettled\uff1a\u8fd4\u56de\u6240\u6709 Promise \u7684\u7ed3\u679c\nconst p1 = Promise.resolve(1);\nconst p2 = Promise.reject(2);\n\nPromise.allSettled([p1, p2])\n    .then(results => {\n        console.log(results);\n        \/\/ [\n        \/\/   { status: 'fulfilled', value: 1 },\n        \/\/   { status: 'rejected', reason: 2 }\n        \/\/ ]\n    });\n<\/code><\/pre>\n
    \n
    \ud83c\udfae \u5b9e\u6218\u793a\u4f8b<\/h2>\n
    \u793a\u4f8b 1\uff1a\u5c01\u88c5\u5f02\u6b65\u64cd\u4f5c<\/h3>\n
    \/\/ \u5c01\u88c5 fetch \u4e3a Promise\nfunction fetchJSON(url) {\n    return new Promise((resolve, reject) => {\n        fetch(url)\n            .then(response => {\n                if (!response.ok) {\n                    throw new Error('HTTP ' + response.status);\n                }\n                return response.json();\n            })\n            .then(data => resolve(data))\n            .catch(error => reject(error));\n    });\n}\n\n\/\/ \u4f7f\u7528\nfetchJSON('\/api\/data')\n    .then(data => console.log(data))\n    .catch(error => console.error(error));\n<\/code><\/pre>\n
    \u793a\u4f8b 2\uff1a\u5f02\u6b65\u6587\u4ef6\u64cd\u4f5c<\/h3>\n
    \/\/ \u8bfb\u53d6\u6587\u4ef6\u7684 Promise \u7248\u672c\uff08Node.js\uff09\nfunction readFilePromise(path) {\n    return new Promise((resolve, reject) => {\n        fs.readFile(path, 'utf8', (err, data) => {\n            if (err) {\n                reject(err);\n            } else {\n                resolve(data);\n            }\n        });\n    });\n}\n\n\/\/ \u4f7f\u7528\nreadFilePromise('.\/data.txt')\n    .then(data => console.log(data))\n    .catch(err => console.error('\u8bfb\u53d6\u5931\u8d25:', err));\n<\/code><\/pre>\n
    \u793a\u4f8b 3\uff1a\u987a\u5e8f\u6267\u884c\u591a\u4e2a\u5f02\u6b65\u64cd\u4f5c<\/h3>\n
    \/\/ \u987a\u5e8f\u6267\u884c\uff1a\u4f7f\u7528 then \u94fe\nfunction getUser(id) {\n    return fetch('\/api\/users\/' + id).then(r => r.json());\n}\n\nfunction getPosts(userId) {\n    return fetch('\/api\/users\/' + userId + '\/posts').then(r => r.json());\n}\n\nfunction getComments(postId) {\n    return fetch('\/api\/posts\/' + postId + '\/comments').then(r => r.json());\n}\n\n\/\/ \u4f9d\u6b21\u6267\u884c\ngetUser(1)\n    .then(user => getPosts(user.id))\n    .then(posts => getComments(posts[0].id))\n    .then(comments => console.log(comments))\n    .catch(error => console.error(error));\n<\/code><\/pre>\n
    \n
    \u26a0\ufe0f \u91cd\u8981\u6ce8\u610f\u4e8b\u9879<\/h2>\n
    1. \u603b\u662f\u8fd4\u56de\u6216\u4f20\u9012 Promise<\/h3>\n
    \/\/ \u6b63\u786e\uff1a\u603b\u662f\u8fd4\u56de Promise\nfunction getData() {\n    return fetch('\/api\/data').then(r => r.json());\n}\n\n\/\/ \u9519\u8bef\uff1a\u4e0d\u8fd4\u56de Promise\nfunction getData() {\n    fetch('\/api\/data').then(r => r.json());\n    \/\/ \u8c03\u7528\u8005\u65e0\u6cd5\u83b7\u53d6\u7ed3\u679c\n}\n<\/code><\/pre>\n
    2. \u603b\u662f\u5904\u7406\u9519\u8bef<\/h3>\n
    \/\/ \u6b63\u786e\uff1a\u603b\u662f\u5904\u7406\u9519\u8bef\npromise\n    .then(data => processData(data))\n    .catch(error => handleError(error));\n\n\/\/ \u9519\u8bef\uff1a\u4e0d\u5904\u7406\u9519\u8bef\npromise.then(data => processData(data));\n    \/\/ \u9519\u8bef\u4f1a\u53d8\u6210\u672a\u6355\u83b7\u7684 Promise rejection\n<\/code><\/pre>\n
    3. \u907f\u514d\u5d4c\u5957 Promise<\/h3>\n
    \/\/ \u6b63\u786e\uff1a\u6241\u5e73\u5316 then \u94fe\npromise1\n    .then(result1 => {\n        return promise2(result1);\n    })\n    .then(result2 => {\n        return promise3(result2);\n    });\n\n\/\/ \u9519\u8bef\uff1a\u5d4c\u5957 Promise\npromise1.then(result1 => {\n    promise2(result1).then(result2 => {\n        promise3(result2).then(result3 => {\n            \/\/ \u53c8\u662f\u56de\u8c03\u5730\u72f1\n        });\n    });\n});\n<\/code><\/pre>\n
    4. Promise \u72b6\u6001\u4e0d\u53ef\u9006<\/h3>\n
    const promise = new Promise((resolve) => {\n    resolve('\u7b2c\u4e00\u6b21');\n    resolve('\u7b2c\u4e8c\u6b21');  \/\/ \u65e0\u6548\uff0cPromise \u72b6\u6001\u4e0d\u4f1a\u6539\u53d8\n    reject('\u5931\u8d25');      \/\/ \u65e0\u6548\n});\n\npromise.then(console.log);  \/\/ \u53ea\u8f93\u51fa '\u7b2c\u4e00\u6b21'\n<\/code><\/pre>\n
    \n
    \ud83c\udf93 \u5b9e\u6218\u5e94\u7528\u573a\u666f<\/h2>\n
    \u573a\u666f 1: API \u8bf7\u6c42<\/h3>\n
    \/\/ \u5e76\u884c\u8bf7\u6c42\u591a\u4e2a API\nasync function getDashboardData() {\n    const [users, posts, comments] = await Promise.all([\n        fetch('\/api\/users').then(r => r.json()),\n        fetch('\/api\/posts').then(r => r.json()),\n        fetch('\/api\/comments').then(r => r.json())\n    ]);\n    \n    return { users, posts, comments };\n}\n<\/code><\/pre>\n
    \u573a\u666f 2: \u8d85\u65f6\u63a7\u5236<\/h3>\n
    \/\/ Promise.race \u5b9e\u73b0\u8d85\u65f6\nfunction fetchWithTimeout(url, timeout = 5000) {\n    const fetchPromise = fetch(url);\n    const timeoutPromise = new Promise((_, reject) =>\n        setTimeout(() => reject(new Error('\u8bf7\u6c42\u8d85\u65f6')), timeout)\n    );\n    \n    return Promise.race([fetchPromise, timeoutPromise]);\n}\n<\/code><\/pre>\n
    \u573a\u666f 3: \u56fe\u7247\u9884\u52a0\u8f7d<\/h3>\n
    \/\/ Promise.all \u9884\u52a0\u8f7d\u591a\u5f20\u56fe\u7247\nfunction preloadImages(urls) {\n    const promises = urls.map(url => {\n        return new Promise((resolve, reject) => {\n            const img = new Image();\n            img.onload = () => resolve(url);\n            img.onerror = () => reject(new Error('\u52a0\u8f7d\u5931\u8d25: ' + url));\n            img.src = url;\n        });\n    });\n    \n    return Promise.all(promises);\n}\n<\/code><\/pre>\n
    \n
    \u270d\ufe0f \u7ec3\u4e60\u4efb\u52a1<\/h2>\n
    \u57fa\u7840\u7ec3\u4e60\uff08\u5fc5\u505a\uff09<\/h3>\n
      \n
    1. \n
      Promise \u521b\u5efa<\/strong>\uff1a<\/p>\n