{"id":10021081,"date":"2025-11-18T14:07:11","date_gmt":"2025-11-18T06:07:11","guid":{"rendered":"https:\/\/itmax.cn\/?p=10021081"},"modified":"2025-11-18T14:07:11","modified_gmt":"2025-11-18T06:07:11","slug":"javascript-promise-%e8%af%a6%e8%a7%a3","status":"publish","type":"post","link":"https:\/\/itmax.cn\/?p=10021081","title":{"rendered":"JavaScript Promise \u8be6\u89e3"},"content":{"rendered":"

JavaScript Promise \u5b8c\u5168\u6307\u5357\uff1a\u4ece\u57fa\u7840\u5230\u8fdb\u9636<\/h2>\n

\u4e00\u3001Promise \u6784\u9020\u51fd\u6570\u57fa\u7840<\/h3>\n

1.1 \u57fa\u672c\u8bed\u6cd5\u7ed3\u6784<\/h4>\n
var my_promise = new Promise(function(resolve, reject) {\n    \/\/ \u6267\u884c\u5668\u51fd\u6570\n    if (\u6761\u4ef6) {\n        resolve('\u6210\u529f\u503c');\n    } else {\n        reject('\u5931\u8d25\u503c');\n    }\n});<\/code><\/pre>\n
1.2 \u6267\u884c\u5668\u51fd\u6570\uff08Executor Function\uff09<\/h4>\n
    \n
  • function(resolve, reject)<\/code> \u662f\u533f\u540d\u51fd\u6570<\/strong>\uff0c\u4e5f\u79f0\u4e3a\u6267\u884c\u5668\u51fd\u6570<\/strong><\/li>\n
  • \u8be5\u51fd\u6570\u6709\u4e24\u4e2a\u53c2\u6570\uff1aresolve<\/code> \u548c reject<\/code><\/li>\n
  • \u26a1 \u5173\u952e\u7279\u6027<\/strong>\uff1a\u6267\u884c\u5668\u51fd\u6570\u5728 new Promise()<\/code> \u65f6\u7acb\u5373\u540c\u6b65\u6267\u884c<\/strong><\/li>\n<\/ul>\n
    1.3 resolve \u548c reject \u53c2\u6570\u8be6\u89e3<\/h4>\n
      \n
    • \u672c\u8d28<\/strong>\uff1aresolve<\/code> \u548c reject<\/code> \u662f\u51fd\u6570\u53c2\u6570<\/strong>\uff08\u4e0d\u662f\u5c5e\u6027\u6216\u65b9\u6cd5\uff09<\/li>\n
    • \u6765\u6e90<\/strong>\uff1a\u7531 JavaScript \u5f15\u64ce\u81ea\u52a8\u521b\u5efa\u5e76\u4f20\u9012\u7ed9\u6267\u884c\u5668\u51fd\u6570<\/li>\n
    • \n
      \u4f5c\u7528<\/strong>\uff1a<\/p>\n
        \n
      • resolve(value)<\/code>\uff1a\u5c06 Promise \u72b6\u6001\u6539\u4e3a fulfilled<\/code>\uff0c\u5e76\u4f20\u9012\u6210\u529f\u503c<\/li>\n
      • reject(reason)<\/code>\uff1a\u5c06 Promise \u72b6\u6001\u6539\u4e3a rejected<\/code>\uff0c\u5e76\u4f20\u9012\u5931\u8d25\u539f\u56e0<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n
        \n
        \u4e8c\u3001Promise \u7684\u4e09\u79cd\u72b6\u6001<\/h3>\n\n\n\n\n\n\n\n
        \u72b6\u6001<\/th>\n\u82f1\u6587\u540d<\/th>\n\u8bf4\u660e<\/th>\n<\/tr>\n<\/thead>\n
        \u7b49\u5f85\u4e2d<\/td>\npending<\/code><\/td>\nPromise \u7684\u521d\u59cb\u72b6\u6001<\/td>\n<\/tr>\n
        \u5df2\u6210\u529f<\/td>\nfulfilled<\/code><\/td>\n\u8c03\u7528 resolve()<\/code> \u540e\u7684\u72b6\u6001<\/td>\n<\/tr>\n
        \u5df2\u5931\u8d25<\/td>\nrejected<\/code><\/td>\n\u8c03\u7528 reject()<\/code> \u540e\u7684\u72b6\u6001<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n
        \u26a0\ufe0f \u6ce8\u610f<\/strong>\uff1aPromise \u72b6\u6001\u4e00\u65e6\u6539\u53d8\uff08\u4ece pending<\/code> \u5230 fulfilled<\/code> \u6216 rejected<\/code>\uff09\uff0c\u5c31\u4e0d\u53ef\u9006\u8f6c<\/strong>\u3002<\/p>\n
        \n
        \u4e09\u3001return \u8bed\u53e5\u7684\u91cd\u8981\u6027<\/h3>\n
        3.1 \u4e3a\u4ec0\u4e48\u9700\u8981 return<\/h4>\n
        function createPromise() {\n    return new Promise((resolve, reject) => {\n        \/\/ \u6267\u884c\u5668\u51fd\u6570\u5185\u5bb9\n    });\n}<\/code><\/pre>\n
          \n
        • \u2705 \u5fc5\u987b\u5199 return<\/strong>\uff1a\u5c06\u521b\u5efa\u7684 Promise \u5bf9\u8c61\u8fd4\u56de\u7ed9\u5916\u90e8<\/li>\n
        • \u274c \u4e0d\u5199 return<\/strong>\uff1aPromise \u5185\u90e8\u903b\u8f91\u4ecd\u7136\u6267\u884c\uff0c\u4f46\u5916\u90e8\u65e0\u6cd5\u83b7\u5f97 Promise \u5bf9\u8c61<\/li>\n
        • \ud83d\udeab \u7ed3\u679c<\/strong>\uff1a\u65e0\u6cd5\u8c03\u7528 .then()<\/code> \u548c .catch()<\/code> \u65b9\u6cd5<\/li>\n<\/ul>\n
          3.2 \u6267\u884c\u65f6\u673a\u8bf4\u660e<\/h4>\n
          my_obj = createPromise(); \/\/ \u6b64\u65f6\u6267\u884c\u5668\u51fd\u6570\u7acb\u5373\u6267\u884c<\/code><\/pre>\n
            \n
          • \u6267\u884c\u5668\u51fd\u6570\u5728 new Promise()<\/code> \u65f6\u7acb\u5373\u6267\u884c<\/strong>\uff08\u540c\u6b65\uff09<\/li>\n
          • \u4e0d\u9700\u8981\u8c03\u7528 my_obj()<\/code> \u6765\u89e6\u53d1\u6267\u884c\u5668\u51fd\u6570<\/li>\n
          • Promise \u5bf9\u8c61\u521b\u5efa\u5b8c\u6210\u540e\u8fd4\u56de\u7ed9 my_obj<\/code><\/li>\n<\/ul>\n
            \n
            \u56db\u3001then \u65b9\u6cd5\u8be6\u89e3<\/h3>\n
            4.1 \u57fa\u672c\u7528\u6cd5<\/h4>\n
            obj.then(result => console.log(result))<\/code><\/pre>\n
            4.2 \u8bed\u6cd5\u5206\u6790<\/h4>\n
              \n
            • then()<\/code> \u65b9\u6cd5\u63a5\u53d7\u4e00\u4e2a\u51fd\u6570<\/strong>\u4f5c\u4e3a\u53c2\u6570<\/li>\n
            • \n
              result => console.log(result)<\/code> \u662f\u7bad\u5934\u51fd\u6570<\/strong>\uff08\u533f\u540d\u51fd\u6570\uff09<\/p>\n
                \n
              • \u53c2\u6570\uff1aresult<\/code><\/li>\n
              • \u51fd\u6570\u4f53\uff1aconsole.log(result)<\/code><\/li>\n<\/ul>\n<\/li>\n<\/ul>\n
                4.3 \u5de5\u4f5c\u539f\u7406<\/h4>\n
                  \n
                1. Promise \u72b6\u6001\u53d8\u4e3a fulfilled<\/code><\/li>\n
                2. then<\/code> \u65b9\u6cd5\u68c0\u6d4b\u5230\u72b6\u6001\u53d8\u5316<\/li>\n
                3. \u81ea\u52a8\u8c03\u7528\u4f20\u5165\u7684\u56de\u8c03\u51fd\u6570<\/li>\n
                4. \u5c06 Promise \u7684\u6210\u529f\u503c\u4f5c\u4e3a\u53c2\u6570\u4f20\u9012\u7ed9\u56de\u8c03\u51fd\u6570<\/li>\n<\/ol>\n
                  4.4 \u7b49\u4ef7\u5199\u6cd5<\/h4>\n
                  \/\/ \u7bad\u5934\u51fd\u6570\nobj.then(result => console.log(result))\n\n\/\/ \u4f20\u7edf\u51fd\u6570\nobj.then(function(result) {\n    console.log(result);\n})\n\n\/\/ \u547d\u540d\u51fd\u6570\nfunction handleResult(result) {\n    console.log(result);\n}\nobj.then(handleResult)<\/code><\/pre>\n
                  \n
                  \u4e94\u3001Promise \u9759\u6001\u65b9\u6cd5<\/h3>\n
                  5.1 \u6784\u9020\u51fd\u6570 vs \u9759\u6001\u65b9\u6cd5\u5bf9\u6bd4<\/h4>\n\n\n\n\n\n\n\n
                  \u65b9\u6cd5<\/th>\n\u662f\u5426\u6709\u6267\u884c\u5668\u51fd\u6570<\/th>\n\u7528\u9014<\/th>\n<\/tr>\n<\/thead>\n
                  new Promise()<\/code><\/td>\n\u2705 \u6709<\/td>\n\u521b\u5efa\u53ef\u63a7\u5236\u72b6\u6001\u7684 Promise<\/td>\n<\/tr>\n
                  Promise.resolve()<\/code><\/td>\n\u274c \u6ca1\u6709<\/td>\n\u76f4\u63a5\u521b\u5efa\u6210\u529f\u72b6\u6001\u7684 Promise<\/td>\n<\/tr>\n
                  Promise.reject()<\/code><\/td>\n\u274c \u6ca1\u6709<\/td>\n\u76f4\u63a5\u521b\u5efa\u5931\u8d25\u72b6\u6001\u7684 Promise<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n
                  5.2 \u9759\u6001\u65b9\u6cd5\u5217\u8868<\/h4>\n
                  \u5355\u4e2a Promise \u521b\u5efa<\/h5>\n
                    \n
                  • Promise.resolve(value)<\/code><\/strong>\uff1a\u76f4\u63a5\u521b\u5efa fulfilled<\/code> \u72b6\u6001\u7684 Promise<\/li>\n
                  • Promise.reject(reason)<\/code><\/strong>\uff1a\u76f4\u63a5\u521b\u5efa rejected<\/code> \u72b6\u6001\u7684 Promise<\/li>\n<\/ul>\n
                    \u591a\u4e2a Promise \u5904\u7406<\/h5>\n