{"id":1004,"date":"2023-03-12T08:57:30","date_gmt":"2023-03-12T00:57:30","guid":{"rendered":"https:\/\/www.appblog.cn\/?p=1004"},"modified":"2023-03-12T08:57:30","modified_gmt":"2023-03-12T00:57:30","slug":"vue-resource-http","status":"publish","type":"post","link":"https:\/\/www.appblog.cn\/index.php\/2023\/03\/12\/vue-resource-http\/","title":{"rendered":"vue-resource HTTP"},"content":{"rendered":"

\u53ef\u4ee5\u4f7f\u7528\u5168\u5c40\u7684 Vue.http<\/code> \u6216\u8005\u5728 Vue<\/code> \u5b9e\u4f8b\u4e2d\u7684 this.$http<\/code> \u8c03\u7528 HTTP \u670d\u52a1<\/p>\n

\u4f7f\u7528<\/h2>\n

Vue \u5b9e\u4f8b\u63d0\u4f9b\u4e86 this.$http<\/code> \u670d\u52a1\u53ef\u7528\u4e8e\u53d1\u9001 HTTP \u8bf7\u6c42<\/p>\n

<\/p>\n

{\n  \/\/ GET \/someUrl\n  this.$http.get('\/someUrl').then((response) => {\n    \/\/ success callback\n  }, (response) => {\n    \/\/ error callback\n  });\n}<\/code><\/pre>\n
\u65b9\u6cd5<\/h2>\n
\u6240\u6709\u7684\u8bf7\u6c42\u7c7b\u578b\u90fd\u53ef\u4ee5\u4f7f\u7528\u77ed\u51fd\u6570\uff0c\u53ef\u4ee5\u5728\u5168\u5c40\u6216\u8005 Vue \u5b9e\u4f8b\u4e2d\u4f7f\u7528\u3002<\/p>\n
\/\/ \u5168\u5c40 Vue \u5bf9\u8c61\nVue.http.get('\/someUrl', [options]).then(successCallback, errorCallback);\nVue.http.post('\/someUrl', [body], [options]).then(successCallback, errorCallback);<\/code><\/pre>\n
\/\/ Vue \u5b9e\u4f8b\nthis.$http.get('\/someUrl', [options]).then(successCallback, errorCallback);\nthis.$http.post('\/someUrl', [body], [options]).then(successCallback, errorCallback);<\/code><\/pre>\n
\u77ed\u65b9\u6cd5\u6e05\u5355\uff1a<\/p>\n
get(url, [options])\nhead(url, [options])\ndelete(url, [options])\njsonp(url, [options])\npost(url, [body], [options])\nput(url, [body], [options])\npatch(url, [body], [options])<\/code><\/pre>\n
\u9009\u9879<\/h2>\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
url<\/th>\nstring<\/th>\n\u8bf7\u6c42\u53d1\u9001\u5230\u7684 URL<\/th>\n<\/tr>\n<\/thead>\n
body<\/td>\nObject, FormData, string<\/td>\n\u8bf7\u6c42\u4e2d\u8981\u53d1\u9001\u7684\u6570\u636e<\/td>\n<\/tr>\n
headers<\/td>\nObject<\/td>\n\u4f5c\u4e3a HTTP \u8bf7\u6c42\u5934\u53d1\u9001\u7684 Headers \u5bf9\u8c61<\/td>\n<\/tr>\n
params<\/td>\nObject<\/td>\n\u4f5c\u4e3a URL \u53c2\u6570\u53d1\u9001\u7684 Parameters \u5bf9\u8c61<\/td>\n<\/tr>\n
method<\/td>\nstring<\/td>\nHTTP \u65b9\u6cd5 (\u4f8b\u5982\uff1a GET, POST, …)<\/td>\n<\/tr>\n
timeout<\/td>\nnumber<\/td>\n\u8bf7\u6c42\u8d85\u65f6\u7684\u6beb\u79d2\u6570 (0 \u4e3a\u4e0d\u8d85\u65f6)<\/td>\n<\/tr>\n
before<\/td>\nfunction(request)<\/td>\n\u5728\u8bf7\u6c42\u53d1\u9001\u4e4b\u524d\u7528\u4e8e\u4fee\u6539\u8bf7\u6c42\u9009\u9879\u7684\u56de\u8c03\u51fd\u6570<\/td>\n<\/tr>\n
progress<\/td>\nfunction(event)<\/td>\n\u4e0a\u4f20\u65f6\u7528\u4e8e\u63a7\u5236 ProgressEvent \u7684\u56de\u8c03\u51fd\u6570<\/td>\n<\/tr>\n
credentials<\/td>\nboolean<\/td>\nIndicates whether or not cross-site Access-Control requests should be made using credentials<\/td>\n<\/tr>\n
emulateHTTP<\/td>\nboolean<\/td>\n\u4f7f\u7528 HTTP POST \u53d1\u9001 PUT, PATCH \u548c DELETE \u8bf7\u6c42\u5e76\u8bbe\u7f6e X-HTTP-Method-Override \u5934<\/td>\n<\/tr>\n
emulateJSON<\/td>\nboolean<\/td>\n\u4ee5 application\/x-www-form-urlencoded \u5185\u5bb9\u7c7b\u578b\u53d1\u9001\u8bf7\u6c42\u62a5\u6587<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n
\u54cd\u5e94<\/h2>\n
\u901a\u8fc7\u4e0b\u9762\u7684\u5c5e\u6027\u548c\u51fd\u6570\u5c06\u8bf7\u6c42\u89e3\u6790\u4e3a\u54cd\u5e94\u5bf9\u8c61\uff1a<\/p>\n\n\n\n\n\n\n\n\n\n\n
\u5c5e\u6027<\/th>\n\u7c7b\u578b<\/th>\n\u63cf\u8ff0<\/th>\n<\/tr>\n<\/thead>\n
url<\/td>\nstring<\/td>\n\u54cd\u5e94\u7684\u6e90 URL<\/td>\n<\/tr>\n
body<\/td>\nObject, Blob, string<\/td>\n\u54cd\u5e94\u7684\u6570\u636e\u62a5\u6587<\/td>\n<\/tr>\n
headers<\/td>\nHeader<\/td>\n\u54cd\u5e94\u5934\u5bf9\u8c61<\/td>\n<\/tr>\n
ok<\/td>\nboolean<\/td>\n\u4ece 200 \u5230 299 \u7684 HTTP \u72b6\u6001\u7801<\/td>\n<\/tr>\n
status<\/td>\nnumber<\/td>\n\u54cd\u5e94\u4e2d\u7684 HTTP \u72b6\u6001\u7801<\/td>\n<\/tr>\n
statusText<\/td>\nstring<\/td>\n\u54cd\u5e94\u4e2d\u7684 HTTP \u72b6\u6001\u6587\u672c<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n\n\n\n\n\n\n\n
\u51fd\u6570<\/th>\n\u7c7b\u578b<\/th>\n\u63cf\u8ff0<\/th>\n<\/tr>\n<\/thead>\n
text()<\/td>\nPromise<\/td>\n\u4f5c\u4e3a\u5b57\u7b26\u4e32\u89e3\u6790\u62a5\u6587<\/td>\n<\/tr>\n
json()<\/td>\nPromise<\/td>\n\u4f5c\u4e3a Json \u5bf9\u8c61\u89e3\u6790\u62a5\u6587<\/td>\n<\/tr>\n
blob()<\/td>\nPromise<\/td>\n\u4f5c\u4e3a Blob \u5bf9\u8c61\u89e3\u6790\u62a5\u6587<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n
\u5b9e\u4f8b<\/h2>\n
{\n  \/\/ POST \/someUrl\n  this.$http.post('\/someUrl', {foo: 'bar'}).then((response) => {\n\n    \/\/ get status\n    response.status;\n\n    \/\/ get status text\n    response.statusText;\n\n    \/\/ get 'Expires' header\n    response.headers.get('Expires');\n\n    \/\/ set data on vm\n    this.$set('someData', response.body);\n\n  }, (response) => {\n    \/\/ error callback\n  });\n}<\/code><\/pre>\n
\u83b7\u53d6\u56fe\u50cf\u5e76\u4f7f\u7528 blob() \u65b9\u6cd5\u6765\u4ece\u54cd\u5e94\u4e2d\u63d0\u53d6\u56fe\u50cf\u6b63\u6587\u5185\u5bb9<\/p>\n
{\n  \/\/ GET \/image.jpg\n  this.$http.get('\/image.jpg').then((response) => {\n\n    \/\/ resolve to Blob\n    return response.blob();\n\n  }).then(blob) => {\n    \/\/ use image Blob\n  });\n}<\/code><\/pre>\n
\u62e6\u622a\u5668<\/h2>\n
\u53ef\u4ee5\u5168\u5c40\u5b9a\u4e49\u4e00\u4e2a\u62e6\u622a\u5668\uff0c\u7528\u4e8e\u9884\u5904\u7406\u548c\u540e\u5904\u7406\u7684\u8bf7\u6c42\u3002<\/p>\n
\u8bf7\u6c42\u5904\u7406<\/h3>\n
Vue.http.interceptors.push((request, next) => {\n\n  \/\/ modify request\n  request.method = 'POST';\n\n  \/\/ continue to next interceptor\n  next();\n});<\/code><\/pre>\n
\u8bf7\u6c42\u548c\u54cd\u5e94\u5904\u7406<\/h3>\n
Vue.http.interceptors.push((request, next)  => {\n\n  \/\/ modify request\n  request.method = 'POST';\n\n  \/\/ continue to next interceptor\n  next((response) => {\n\n    \/\/ modify response\n    response.body = '...';\n\n  });\n});<\/code><\/pre>\n
\u8fd4\u56de\u4e00\u4e2a\u54cd\u5e94\u5e76\u505c\u6b62\u5904\u7406<\/h3>\n
Vue.http.interceptors.push((request, next) => {\n\n  \/\/ modify request ...\n\n  \/\/ stop and return response\n  next(request.respondWith(body, {\n    status: 404,\n    statusText: 'Not found'\n  }));\n});<\/code><\/pre>\n","protected":false},"excerpt":{"rendered":"
\u53ef\u4ee5\u4f7f\u7528\u5168\u5c40\u7684 Vue.http \u6216\u8005\u5728 Vue \u5b9e\u4f8b\u4e2d\u7684 this.$http \u8c03\u7528 HTTP \u670d\u52a1 \u4f7f\u7528  […]<\/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":[129],"class_list":["post-1004","post","type-post","status-publish","format-standard","hentry","category-vue","tag-http"],"_links":{"self":[{"href":"https:\/\/www.appblog.cn\/index.php\/wp-json\/wp\/v2\/posts\/1004","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=1004"}],"version-history":[{"count":0,"href":"https:\/\/www.appblog.cn\/index.php\/wp-json\/wp\/v2\/posts\/1004\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.appblog.cn\/index.php\/wp-json\/wp\/v2\/media?parent=1004"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.appblog.cn\/index.php\/wp-json\/wp\/v2\/categories?post=1004"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.appblog.cn\/index.php\/wp-json\/wp\/v2\/tags?post=1004"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}