{"id":1011,"date":"2023-03-12T09:03:52","date_gmt":"2023-03-12T01:03:52","guid":{"rendered":"https:\/\/www.appblog.cn\/?p=1011"},"modified":"2023-04-29T13:16:39","modified_gmt":"2023-04-29T05:16:39","slug":"vue-js-async-and-await-parsing","status":"publish","type":"post","link":"https:\/\/www.appblog.cn\/index.php\/2023\/03\/12\/vue-js-async-and-await-parsing\/","title":{"rendered":"Vue.js async\u4e0eawait\u89e3\u6790"},"content":{"rendered":"

async\/await\u573a\u666f<\/h2>\n

\u8fd9\u662f\u4e00\u4e2a\u7528\u540c\u6b65\u7684\u601d\u7ef4\u6765\u89e3\u51b3\u5f02\u6b65\u95ee\u9898\u7684\u65b9\u6848\uff0c\u5f53\u524d\u7aef\u63a5\u53e3\u8c03\u7528\u9700\u8981\u7b49\u5230\u63a5\u53e3\u8fd4\u56de\u503c\u4ee5\u540e\u6e32\u67d3\u9875\u9762\u65f6\u3002<\/p>\n

\u540d\u8bcd\u89e3\u91ca<\/h2>\n

<\/p>\n

async<\/h3>\n

async<\/code>\u7684\u7528\u6cd5\uff0c\u5b83\u4f5c\u4e3a\u4e00\u4e2a\u5173\u952e\u5b57\u653e\u5230\u51fd\u6570\u524d\u9762\uff0c\u7528\u4e8e\u8868\u793a\u51fd\u6570\u662f\u4e00\u4e2a\u5f02\u6b65\u51fd\u6570\uff0c\u56e0\u4e3aasync<\/code>\u5c31\u662f\u5f02\u6b65\u7684\u610f\u601d\uff0c \u5f02\u6b65\u51fd\u6570\u4e5f\u5c31\u610f\u5473\u7740\u8be5\u51fd\u6570\u7684\u6267\u884c\u4e0d\u4f1a\u963b\u585e\u540e\u9762\u4ee3\u7801\u7684\u6267\u884c\uff0casync<\/code>\u51fd\u6570\u8fd4\u56de\u7684\u662f\u4e00\u4e2apromise<\/code>\u5bf9\u8c61\u3002<\/p>\n

await<\/h3>\n

await<\/code>\u7684\u542b\u4e49\u4e3a\u7b49\u5f85\u3002\u610f\u601d\u5c31\u662f\u4ee3\u7801\u9700\u8981\u7b49\u5f85await<\/code>\u540e\u9762\u7684\u51fd\u6570\u8fd0\u884c\u5b8c\u5e76\u4e14\u6709\u4e86\u8fd4\u56de\u7ed3\u679c\u4e4b\u540e\uff0c\u624d\u7ee7\u7eed\u6267\u884c\u4e0b\u9762\u7684\u4ee3\u7801\u3002\u8fd9\u6b63\u662f\u540c\u6b65\u7684\u6548\u679c\u3002<\/p>\n

function fn() {\n  return new Promise((resolve, reject) => {\n    setTimeout(() => {\n      reject('hello vue.js');\n    }, 1000);\n  })\n}\n\nconst foo = async () => {\n  try {\n    await fn();\n  } catch (e) {\n    console.log(e);  \/\/ some error\n  }\n}<\/code><\/pre>\n
    \n
  • resolve<\/code>\u4e0ereject<\/code>\u5206\u522b\u8868\u793a\u5f02\u6b65\u64cd\u4f5c\u6267\u884c\u6210\u529f\u540e\u7684\u56de\u8c03\u51fd\u6570\u548c\u5f02\u6b65\u64cd\u4f5c\u6267\u884c\u5931\u8d25\u540e\u7684\u56de\u8c03\u51fd\u6570<\/li>\n
  • \u5982\u679casync<\/code>\u51fd\u6570\u4e2d\u6709\u8fd4\u56de\u4e00\u4e2a\u503c\uff0c\u5f53\u8c03\u7528\u8be5\u51fd\u6570\u65f6\uff0c\u5185\u90e8\u4f1a\u8c03\u7528Promise.resolve()<\/code>\u65b9\u6cd5\u628a\u5b83\u8f6c\u5316\u6210\u4e00\u4e2apromise<\/code>\u5bf9\u8c61\u4f5c\u4e3a\u8fd4\u56de<\/li>\n<\/ul>\n
    this.promis().then((res) => {console.log(res)})<\/code><\/pre>\n
    \u8fd9\u5176\u4e2d\u7684res<\/code>\u5c31\u662f\u8fd4\u56de\u7684promise<\/code>\u5bf9\u8c61\u3002<\/p>\n
      \n
    • \n
      \u5176\u4e2d\u7684setTimeout<\/code>\u53ef\u4ee5\u7406\u89e3\u4e3a\u662f\u4e00\u4e2a\u5f02\u6b65\u8bf7\u6c42<\/p>\n<\/li>\n
    • \n
      vue\u4e2d\u7684axios<\/code>\u7684\u7528\u6cd5\uff0c\u8ddfpromise<\/code>\u5c01\u88c5ajax<\/code>\u7684\u65b9\u6cd5\u5f88\u76f8\u4f3c<\/p>\n<\/li>\n<\/ul>\n
      axios.post(url, data,).then((res) =>{}).then((data) => {}).catch((err) => {})<\/code><\/pre>\n
      \n
      Promise<\/code>\u662f\u5f02\u6b65\u7f16\u7a0b\u7684\u4e00\u79cd\u89e3\u51b3\u65b9\u6848\uff0c\u6bd4\u4f20\u7edf\u7684\u89e3\u51b3\u65b9\u6848\uff08\u56de\u8c03\u51fd\u6570\u548c\u4e8b\u4ef6\uff09\u66f4\u5408\u7406\u66f4\u5f3a\u5927\u3002\u6240\u8c13Promise<\/code>\uff0c\u7b80\u5355\u8bf4\u5c31\u662f\u4e00\u4e2a\u5bb9\u5668\uff0c\u91cc\u9762\u4fdd\u5b58\u7740\u67d0\u4e2a\u672a\u6765\u624d\u4f1a\u7ed3\u675f\u7684\u4e8b\u4ef6\uff08\u901a\u5e38\u662f\u4e00\u4e2a\u5f02\u6b65\u64cd\u4f5c\uff09\u7684\u7ed3\u679c\u3002\u4ece\u8bed\u6cd5\u4e0a\u8bf4\uff0cPromise<\/code>\u662f\u4e00\u4e2a\u5bf9\u8c61\uff0c\u4ece\u5b83\u53ef\u4ee5\u83b7\u53d6\u5f02\u6b65\u64cd\u4f5c\u7684\u6d88\u606f\u3002<\/p>\n<\/blockquote>\n
      \u6848\u4f8b<\/h2>\n
      auth.vue<\/h3>\n
      \u9700\u8981\u6ce8\u610f\uff1aawait<\/code>\u5fc5\u987b\u653e\u5728async<\/code>\u4e2d<\/p>\n
      import http from '..\/..\/utils\/http'\nimport api from '..\/..\/utils\/api'\n\nmethods: {\n  fetchData: async function () {\n    var that = this\n    var code = Store.fetchYqm();\n    let params = {\n      inviteCode: code\n    }\n    const response = await http.post(api.getCode, params)\n    var resJson = response.data;\n  }\n}<\/code><\/pre>\n
      http.js<\/h3>\n
      'use strict'\n\nimport axios from 'axios'\nimport qs from 'qs'\n\naxios.interceptors.request.use(config => {\n  \/\/ loading\n  return config\n}, error => {\n  return Promise.reject(error)\n})\n\naxios.interceptors.response.use(response => {\n  return response\n}, error => {\n  return Promise.resolve(error.response)\n})\n\nfunction checkStatus (response) {\n  \/\/ loading\n  \/\/ \u5982\u679chttp\u72b6\u6001\u7801\u6b63\u5e38\uff0c\u5219\u76f4\u63a5\u8fd4\u56de\u6570\u636e\n  if (response && (response.status === 200 || response.status === 304 || response.status === 400)) {\n    return response\n    \/\/ \u5982\u679c\u4e0d\u9700\u8981\u9664\u4e86data\u4e4b\u5916\u7684\u6570\u636e\uff0c\u53ef\u4ee5\u76f4\u63a5 return response.data\n  }\n  \/\/ \u5f02\u5e38\u72b6\u6001\u4e0b\uff0c\u628a\u9519\u8bef\u4fe1\u606f\u8fd4\u56de\u53bb\n  return {\n    status: -404,\n    msg: '\u7f51\u7edc\u5f02\u5e38'\n  }\n}\n\nfunction checkCode (res) {\n  \/\/ \u5982\u679ccode\u5f02\u5e38(\u8fd9\u91cc\u5df2\u7ecf\u5305\u62ec\u7f51\u7edc\u9519\u8bef\uff0c\u670d\u52a1\u5668\u9519\u8bef\uff0c\u540e\u7aef\u629b\u51fa\u7684\u9519\u8bef)\uff0c\u53ef\u4ee5\u5f39\u51fa\u4e00\u4e2a\u9519\u8bef\u63d0\u793a\uff0c\u544a\u8bc9\u7528\u6237\n  if (res.status === -404) {\n    alert(res.msg)\n  }\n  if (res.data && (!res.data.success)) {\n    alert(res.data.error_msg)\n  }\n  return res\n}\n\nexport default {\n  post (url, data) {\n    return axios({\n      method: 'post',\n      url: url,\n      data: qs.stringify(data),\n      timeout: 10000,\n      headers: {\n        'X-Requested-With': 'XMLHttpRequest',\n        'Content-Type': 'application\/x-www-form-urlencoded; charset=UTF-8'\n      }\n    }).then(\n      (response) => {\n        return checkStatus(response)\n      }\n    )\n  },\n  get (url, params) {\n    return axios({\n      method: 'get',\n      baseURL: 'https:\/\/cnodejs.org\/api\/v1',\n      url,\n      params, \/\/ get \u8bf7\u6c42\u65f6\u5e26\u7684\u53c2\u6570\n      timeout: 10000,\n      headers: {\n        'X-Requested-With': 'XMLHttpRequest'\n      }\n    }).then(\n      (response) => {\n        return checkStatus(response)\n      }\n    ).then(\n      (res) => {\n        return checkCode(res)\n      }\n    )\n  }\n}<\/code><\/pre>\n
      api.js<\/h3>\n
      export default {\n  getCode: 'http:\/\/127.0.0.1:8888\/get_author'\n}<\/code><\/pre>\n","protected":false},"excerpt":{"rendered":"
      async\/await\u573a\u666f \u8fd9\u662f\u4e00\u4e2a\u7528\u540c\u6b65\u7684\u601d\u7ef4\u6765\u89e3\u51b3\u5f02\u6b65\u95ee\u9898\u7684\u65b9\u6848\uff0c\u5f53\u524d\u7aef\u63a5\u53e3\u8c03\u7528\u9700\u8981\u7b49\u5230\u63a5\u53e3\u8fd4\u56de\u503c\u4ee5\u540e\u6e32\u67d3 […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[35],"tags":[],"class_list":["post-1011","post","type-post","status-publish","format-standard","hentry","category-vue"],"_links":{"self":[{"href":"https:\/\/www.appblog.cn\/index.php\/wp-json\/wp\/v2\/posts\/1011","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.appblog.cn\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.appblog.cn\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.appblog.cn\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.appblog.cn\/index.php\/wp-json\/wp\/v2\/comments?post=1011"}],"version-history":[{"count":0,"href":"https:\/\/www.appblog.cn\/index.php\/wp-json\/wp\/v2\/posts\/1011\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.appblog.cn\/index.php\/wp-json\/wp\/v2\/media?parent=1011"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.appblog.cn\/index.php\/wp-json\/wp\/v2\/categories?post=1011"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.appblog.cn\/index.php\/wp-json\/wp\/v2\/tags?post=1011"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}