{"id":1055,"date":"2023-03-12T10:11:33","date_gmt":"2023-03-12T02:11:33","guid":{"rendered":"https:\/\/www.appblog.cn\/?p=1055"},"modified":"2023-04-29T12:38:47","modified_gmt":"2023-04-29T04:38:47","slug":"vue-better-http-framework-axios-js","status":"publish","type":"post","link":"https:\/\/www.appblog.cn\/index.php\/2023\/03\/12\/vue-better-http-framework-axios-js\/","title":{"rendered":"Vue\u66f4\u597d\u7684HTTP\u6846\u67b6axios.js"},"content":{"rendered":"

Vue\u66f4\u65b0\u52302.0\u4e4b\u540e\uff0c\u4f5c\u8005\u5c31\u5ba3\u544a\u4e0d\u518d\u5bf9vue-resource\u66f4\u65b0\uff0c\u800c\u662f\u63a8\u8350axios<\/p>\n

\u5b89\u88c5<\/h2>\n

1\u3001\u5229\u7528npm\u5b89\u88c5\uff1anpm install axios --save<\/code>
\n2\u3001\u5229\u7528bower\u5b89\u88c5\uff1abower install axios --save<\/code>
\n3\u3001\u76f4\u63a5\u5229\u7528cdn\u5f15\u5165\uff1a<script src="https:\/\/unpkg.com\/axios\/dist\/axios.min.js"><\/script><\/code><\/p>\n

<\/p>\n

\u793a\u4f8b<\/h2>\n

\u53d1\u9001\u4e00\u4e2aGET\u8bf7\u6c42<\/h3>\n
\/\/\u901a\u8fc7\u7ed9\u5b9a\u7684id\u53d1\u9001\u8bf7\u6c42\naxios.get('\/user?id=123456')\n.then(function(response){\n  console.log(response)\n})\n.catch(function(err){\n  console.log(err)\n})\n\/\/\u4ee5\u4e0a\u8bf7\u6c42\u4e5f\u53ef\u4ee5\u901a\u8fc7\u8fd9\u79cd\u65b9\u5f0f\u53d1\u9001\naxios.get('\/user', {\n  params: {\n    id: 123456\n  }\n})\n.then(function(response){\n  console.log(response)\n})\n.catch(function(err){\n  console.log(err)\n})<\/code><\/pre>\n
\u53d1\u9001\u4e00\u4e2aPOST\u8bf7\u6c42<\/h3>\n
axios.post('\/user', {\n  firstName: 'Joe',\n  lastName: 'Ye'\n})\n.then(function(res){\n  console.log(res)\n})\n.catch(function(err){\n  console.log(err)\n})<\/code><\/pre>\n
\u4e00\u6b21\u6027\u5e76\u53d1\u591a\u4e2a\u8bf7\u6c42<\/h3>\n
function getUserAccount(){\n  return axios.get('\/user\/123456')\n}\nfunction getUserPermissions(){\n  return axios.get('\/user\/123456\/permissions');\n}\naxios.all([getUserAccount(), getUserPermissions()])\n  .then(axios.spread(function(account, permissions){\n    \/\/\u5f53\u8fd9\u4e24\u4e2a\u8bf7\u6c42\u90fd\u5b8c\u6210\u65f6\u4f1a\u89e6\u53d1\u8fd9\u4e2a\u51fd\u6570\uff0c\u4e24\u4e2a\u53c2\u6570\u5206\u522b\u4ee3\u8868\u8fd4\u56de\u7684\u7ed3\u679c\n  }))<\/code><\/pre>\n
axios\u7684API<\/h2>\n
axios\u53ef\u4ee5\u901a\u8fc7\u914d\u7f6econfig\u6765\u53d1\u9001\u8bf7\u6c42<\/h3>\n
    \n
  • axios(config)<\/code><\/li>\n<\/ul>\n
    \/\/\u53d1\u9001\u4e00\u4e2aPOST\u8bf7\u6c42\naxios({\n  method: "POST",\n  url: '\/user\/12345',\n  data: {\n    firstName: "Joe",\n    lastName: "Ye"\n  }\n})<\/code><\/pre>\n
      \n
    • axios(url[,config])<\/code><\/li>\n<\/ul>\n
      \/\/\u53d1\u9001\u4e00\u4e2aGET\u8bf7\u6c42\uff08\u9ed8\u8ba4\u7684\u8bf7\u6c42\u65b9\u5f0f\uff09\naxios('\/user\/12345')<\/code><\/pre>\n
      \u8bf7\u6c42\u65b9\u5f0f\u522b\u540d<\/h3>\n
      \u5bf9\u6240\u6709\u5df2\u652f\u6301\u7684\u8bf7\u6c42\u65b9\u5f0f\u63d0\u4f9b\u522b\u540d<\/p>\n
      axios.request(config)\n\naxios.get(url[,config])\n\naxios.delete(url[,config])\n\naxios.head(url[,config])\n\naxios.post(url[,data[,config]])\n\naxios.put(url[,data[,config]])\n\naxios.patch(url[,data[,config]])<\/code><\/pre>\n
      \u6ce8\u610f\uff1a\u5728\u4f7f\u7528\u522b\u540d\u65b9\u6cd5\u65f6\uff0curl<\/code>,method<\/code>,data<\/code>\u8fd9\u51e0\u4e2a\u53c2\u6570\u4e0d\u9700\u8981\u5728\u914d\u7f6e\u4e2d\u58f0\u660e<\/p>\n
      \u5e76\u53d1\u8bf7\u6c42\uff08concurrency\uff09<\/h3>\n
      \/\/iterable\u662f\u4e00\u4e2a\u53ef\u4ee5\u8fed\u4ee3\u7684\u53c2\u6570\u5982\u6570\u7ec4\u7b49\naxios.all(iterable)\n\/\/callback\u8981\u7b49\u5230\u6240\u6709\u8bf7\u6c42\u90fd\u5b8c\u6210\u624d\u4f1a\u6267\u884c\naxios.spread(callback)<\/code><\/pre>\n
      \u521b\u5efa\u4e00\u4e2aaxios\u5b9e\u4f8b\uff0c\u5e76\u4e14\u53ef\u4ee5\u81ea\u5b9a\u4e49\u5176\u914d\u7f6e<\/h3>\n
        \n
      • axios.create([config])<\/code><\/li>\n<\/ul>\n
        var instance = axios.create({\n  baseURL: "https:\/\/some-domain.com\/api\/",\n  timeout: 1000,\n  headers: {'X-Custom-Header': 'foobar'}\n})<\/code><\/pre>\n
          \n
        • \u5b9e\u4f8b\u7684\u65b9\u6cd5<\/li>\n<\/ul>\n
          \u4ee5\u4e0b\u662f\u5b9e\u4f8b\u65b9\u6cd5\uff0c\u6ce8\u610f\u5df2\u7ecf\u5b9a\u4e49\u7684\u914d\u7f6e\u5c06\u548c\u5229\u7528create\u521b\u5efa\u7684\u5b9e\u4f8b\u7684\u914d\u7f6e\u5408\u5e76<\/p>\n
          axios#request(config)\n\naxios#get(url[,config])\n\naxios#delete(url[,config])\n\naxios#head(url[,config])\n\naxios#post(url[,data[,config]])\n\naxios#put(url[,data[,config]])\n\naxios#patch(url[,data[,config]])<\/code><\/pre>\n
          \u8bf7\u6c42\u7684\u914d\u7f6e\uff08request config\uff09<\/h2>\n
          \u4ee5\u4e0b\u5c31\u662f\u8bf7\u6c42\u7684\u914d\u7f6e\u9009\u9879\uff0c\u53ea\u6709url\u9009\u9879\u662f\u5fc5\u987b\u7684\uff0c\u5982\u679cmethod\u9009\u9879\u672a\u5b9a\u4e49\uff0c\u90a3\u4e48\u9ed8\u8ba4\u662f\u4ee5GET\u7684\u65b9\u5f0f\u53d1\u51fa\u8bf7\u6c42<\/p>\n
          {\n  \/\/`url`\u662f\u8bf7\u6c42\u7684\u670d\u52a1\u5668\u5730\u5740\n  url: '\/user',\n\n  \/\/`method`\u662f\u8bf7\u6c42\u8d44\u6e90\u7684\u65b9\u5f0f\n  method: 'get' \/\/default\n\n  \/\/\u5982\u679c`url`\u4e0d\u662f\u7edd\u5bf9\u5730\u5740\uff0c\u90a3\u4e48`baseURL`\u5c06\u4f1a\u52a0\u5230`url`\u7684\u524d\u9762\n  \/\/\u5f53`url`\u662f\u76f8\u5bf9\u5730\u5740\u7684\u65f6\u5019\uff0c\u8bbe\u7f6e`baseURL`\u4f1a\u975e\u5e38\u7684\u65b9\u4fbf\n  baseURL: 'https:\/\/some-domain.com\/api\/',\n\n  \/\/`transformRequest`\u9009\u9879\u5141\u8bb8\u6211\u4eec\u5728\u8bf7\u6c42\u53d1\u9001\u5230\u670d\u52a1\u5668\u4e4b\u524d\u5bf9\u8bf7\u6c42\u7684\u6570\u636e\u505a\u51fa\u4e00\u4e9b\u6539\u52a8\n  \/\/\u8be5\u9009\u9879\u53ea\u9002\u7528\u4e8e\u4ee5\u4e0b\u8bf7\u6c42\u65b9\u5f0f\uff1a`put\/post\/patch`\n  \/\/\u6570\u7ec4\u91cc\u9762\u7684\u6700\u540e\u4e00\u4e2a\u51fd\u6570\u5fc5\u987b\u8fd4\u56de\u4e00\u4e2a\u5b57\u7b26\u4e32\u3001\u4e00\u4e2a`ArrayBuffer`\u6216\u8005`Stream`\n  transformRequest:[function(data){\n    \/\/\u5728\u8fd9\u91cc\u6839\u636e\u81ea\u5df1\u7684\u9700\u6c42\u6539\u53d8\u6570\u636e\n    return data;\n  }],\n\n  \/\/`transformResponse`\u9009\u9879\u5141\u8bb8\u6211\u4eec\u5728\u6570\u636e\u4f20\u9001\u5230`then\/catch`\u65b9\u6cd5\u4e4b\u524d\u5bf9\u6570\u636e\u8fdb\u884c\u6539\u52a8\n  transformResponse:[function(data){\n    \/\/\u5728\u8fd9\u91cc\u6839\u636e\u81ea\u5df1\u7684\u9700\u6c42\u6539\u53d8\u6570\u636e\n    return data\n  }],\n\n  \/\/`headers`\u9009\u9879\u662f\u9700\u8981\u88ab\u53d1\u9001\u7684\u81ea\u5b9a\u4e49\u8bf7\u6c42\u5934\u4fe1\u606f\n  headers: {'X-Requested-With':'XMLHttpRequest'},\n\n  \/\/`params`\u9009\u9879\u662f\u8981\u968f\u8bf7\u6c42\u4e00\u8d77\u53d1\u9001\u7684\u8bf7\u6c42\u53c2\u6570\uff0c\u4e00\u822c\u94fe\u63a5\u5728URL\u540e\u9762\n  \/\/\u4ed6\u7684\u7c7b\u578b\u5fc5\u987b\u662f\u4e00\u4e2a\u7eaf\u5bf9\u8c61\u6216\u8005\u662fURLSearchParams\u5bf9\u8c61\n  params: {\n    id: 123456\n  },\n\n  \/\/`paramsSerializer`\u662f\u4e00\u4e2a\u53ef\u9009\u7684\u51fd\u6570\uff0c\u8d77\u4f5c\u7528\u662f\u8ba9\u53c2\u6570\uff08params\uff09\u5e8f\u5217\u5316\n  \/\/\u4f8b\u5982(https:\/\/www.npmjs.com\/package\/qs,http:\/\/api.jquery.com\/jquery.param)\n  paramsSerializer: function(params){\n    return Qs.stringify(params, {arrayFormat:'brackets'})\n  },\n\n  \/\/`data`\u9009\u9879\u662f\u4f5c\u4e3a\u4e00\u4e2a\u8bf7\u6c42\u4f53\u800c\u9700\u8981\u88ab\u53d1\u9001\u7684\u6570\u636e\n  \/\/\u8be5\u9009\u9879\u53ea\u9002\u7528\u4e8e\u65b9\u6cd5\uff1a`put\/post\/patch`\n  \/\/\u5f53\u6ca1\u6709\u8bbe\u7f6e`transformRequest`\u9009\u9879\u65f6dada\u5fc5\u987b\u662f\u4ee5\u4e0b\u51e0\u79cd\u7c7b\u578b\u4e4b\u4e00\n  \/\/string\/plain\/object\/ArrayBuffer\/ArrayBufferView\/URLSearchParams\n  \/\/\u4ec5\u4ec5\u6d4f\u89c8\u5668\uff1aFormData\/File\/Bold\n  \/\/\u4ec5node:Stream\n  data {\n    firstName: 'Joe',\n    lastName: 'Ye'\n  },\n\n  \/\/`timeout`\u9009\u9879\u5b9a\u4e49\u4e86\u8bf7\u6c42\u53d1\u51fa\u7684\u5ef6\u8fdf\u6beb\u79d2\u6570\n  \/\/\u5982\u679c\u8bf7\u6c42\u82b1\u8d39\u7684\u65f6\u95f4\u8d85\u8fc7\u5ef6\u8fdf\u7684\u65f6\u95f4\uff0c\u90a3\u4e48\u8bf7\u6c42\u4f1a\u88ab\u7ec8\u6b62\n  timeout: 1000,\n\n  \/\/`withCredentails`\u9009\u9879\u8868\u660e\u4e86\u662f\u5426\u662f\u8de8\u57df\u8bf7\u6c42\n  withCredentials: false, \/\/default\n\n  \/\/`adapter`\u9002\u914d\u5668\u9009\u9879\u5141\u8bb8\u81ea\u5b9a\u4e49\u5904\u7406\u8bf7\u6c42\uff0c\u8fd9\u4f1a\u4f7f\u5f97\u6d4b\u8bd5\u53d8\u5f97\u65b9\u4fbf\n  \/\/\u8fd4\u56de\u4e00\u4e2apromise,\u5e76\u63d0\u4f9b\u9a8c\u8bc1\u8fd4\u56de\n  adapter: function(config){\n    \/*..........*\/\n  },\n\n  \/\/`auth`\u8868\u660eHTTP\u57fa\u7840\u7684\u8ba4\u8bc1\u5e94\u8be5\u88ab\u4f7f\u7528\uff0c\u5e76\u63d0\u4f9b\u8bc1\u4e66\n  \/\/\u8fd9\u4f1a\u8bbe\u7f6e\u4e00\u4e2aauthorization\u5934\uff08header\uff09,\u5e76\u8986\u76d6\u4f60\u5728header\u8bbe\u7f6e\u7684Authorization\u5934\u4fe1\u606f\n  auth: {\n    username: "Joe.Ye",\n    password: "123456"\n  },\n\n  \/\/\u8fd4\u56de\u6570\u636e\u7684\u683c\u5f0f\n  \/\/\u5176\u53ef\u9009\u9879\u662farraybuffer,blob,document,json,text,stream\n  responseType: 'json',\/\/default\n\n  xsrfCookieName: 'XSRF-TOKEN', \/\/default\n\n  xsrfHeaderName: 'X-XSRF-TOKEN', \/\/default\n\n  \/\/\u4e0a\u4f20\u8fdb\u5ea6\u4e8b\u4ef6\n  onUploadProgress: function(progressEvent){\n  },\n\n  \/\/\u4e0b\u8f7d\u8fdb\u5ea6\u7684\u4e8b\u4ef6\n  onDownloadProgress: function(progressEvent){\n  },\n\n  \/\/\u76f8\u5e94\u5185\u5bb9\u7684\u6700\u5927\u503c\n  maxContentLength: 2000,\n\n  \/\/`validateStatus`\u5b9a\u4e49\u4e86\u662f\u5426\u6839\u636ehttp\u76f8\u5e94\u72b6\u6001\u7801\uff0c\u6765resolve\u6216\u8005reject promise\n  \/\/\u5982\u679c`validateStatus`\u8fd4\u56detrue(\u6216\u8005\u8bbe\u7f6e\u4e3a`null`\u6216\u8005`undefined`)\uff0c\u90a3\u4e48promise\u7684\u72b6\u6001\u5c06\u4f1a\u662fresolved\uff0c\u5426\u5219\u5176\u72b6\u6001\u5c31\u662frejected\n  validateStatus: function(status){\n    return status >= 200 && status <300; \/\/default\n  },\n\n  \/\/`maxRedirects`\u5b9a\u4e49\u4e86\u5728nodejs\u4e2d\u91cd\u5b9a\u5411\u7684\u6700\u5927\u6570\u91cf\n  maxRedirects: 5, \/\/default\n\n  \/\/`httpAgent\/httpsAgent`\u5b9a\u4e49\u4e86\u5f53\u53d1\u9001http\/https\u8bf7\u6c42\u8981\u7528\u5230\u7684\u81ea\u5b9a\u4e49\u4ee3\u7406\n  \/\/keeyAlive\u5728\u9009\u9879\u4e2d\u6ca1\u6709\u88ab\u9ed8\u8ba4\u6fc0\u6d3b\n  httpAgent: new http.Agent({keeyAlive:true}),\n  httpsAgent: new https.Agent({keeyAlive:true}),\n\n  \/\/`proxy`\u5b9a\u4e49\u4e86\u4e3b\u673a\u540d\u5b57\u548c\u7aef\u53e3\u53f7\uff0c\n  \/\/`auth`\u8868\u660ehttp\u57fa\u672c\u8ba4\u8bc1\u5e94\u8be5\u4e0eproxy\u4ee3\u7406\u94fe\u63a5\uff0c\u5e76\u63d0\u4f9b\u8bc1\u4e66\n  \/\/\u8fd9\u5c06\u4f1a\u8bbe\u7f6e\u4e00\u4e2a`Proxy-Authorization`\u7684header\uff0c\u5e76\u4e14\u4f1a\u8986\u76d6\u6389\u5df2\u7ecf\u5b58\u5728`Proxy-Authorization`\u7684header\n  proxy: {\n    host: '127.0.0.1',\n    port: 9000,\n    auth: {\n      username: 'test',\n      password: '123456'\n    }\n  },\n\n  \/\/`cancelToken`\u5b9a\u4e49\u4e86\u4e00\u4e2a\u7528\u4e8e\u53d6\u6d88\u8bf7\u6c42\u7684cancel token\n  \/\/\u8be6\u89c1cancelation\u90e8\u5206\n  cancelToken: new cancelToken(function(cancel){\n\n  })\n}<\/code><\/pre>\n
          \u8bf7\u6c42\u8fd4\u56de\u7684\u5185\u5bb9<\/h2>\n
          {\n  data: {},\n  status: 200,\n  \/\/\u4ece\u670d\u52a1\u5668\u8fd4\u56de\u7684http\u72b6\u6001\u6587\u672c\n  statusText: 'OK',\n  \/\/\u54cd\u5e94\u5934\u4fe1\u606f\n  headers: {},\n  \/\/`config`\u662f\u5728\u8bf7\u6c42\u65f6\u7684\u4e00\u4e9b\u914d\u7f6e\u4fe1\u606f\n  config: {}\n}<\/code><\/pre>\n
          \u4e5f\u53ef\u4ee5\u8fd9\u6837\u83b7\u53d6\u54cd\u5e94\u4fe1\u606f<\/p>\n
          axios.get('\/user\/123456')\n  .then(function(res){\n    console.log(res.data)\n    console.log(res.status)\n    console.log(res.statusText)\n    console.log(res.headers)\n    console.log(res.config)\n  })<\/code><\/pre>\n
          \u9ed8\u8ba4\u914d\u7f6e<\/h2>\n
          \u53ef\u4ee5\u8bbe\u7f6e\u9ed8\u8ba4\u914d\u7f6e\uff0c\u5bf9\u6240\u6709\u8bf7\u6c42\u90fd\u6709\u6548<\/p>\n
            \n
          • \u5168\u5c40\u9ed8\u8ba4\u914d\u7f6e<\/li>\n<\/ul>\n
            axios.defaults.baseURL = 'http:\/\/api.exmple.com'\naxios.defaults.headers.common['Authorization'] = AUTH_TOKEN\naxios.defaults.headers.post['content-Type'] = 'appliction\/x-www-form-urlencoded'<\/code><\/pre>\n
              \n
            • \u81ea\u5b9a\u4e49\u7684\u5b9e\u4f8b\u9ed8\u8ba4\u8bbe\u7f6e<\/li>\n<\/ul>\n
              \/\/\u5f53\u521b\u5efa\u5b9e\u4f8b\u7684\u65f6\u5019\u914d\u7f6e\u9ed8\u8ba4\u914d\u7f6e\nvar instance = axios.create({\n    baseURL: 'https:\/\/api.example.com'\n})\n\n\/\/\u5f53\u5b9e\u4f8b\u521b\u5efa\u65f6\u5019\u4fee\u6539\u914d\u7f6e\ninstance.defaults.headers.common["Authorization"] = AUTH_TOKEN<\/code><\/pre>\n
                \n
              • \u914d\u7f6e\u4e2d\u7684\u6709\u4f18\u5148\u7ea7<\/li>\n<\/ul>\n
                config\u914d\u7f6e\u5c06\u4f1a\u4ee5\u4f18\u5148\u7ea7\u522b\u6765\u5408\u5e76\uff0c\u987a\u5e8f\u662flib\/defauts.js\u4e2d\u7684\u9ed8\u8ba4\u914d\u7f6e\uff0c\u7136\u540e\u662f\u5b9e\u4f8b\u4e2d\u7684\u9ed8\u8ba4\u914d\u7f6e\uff0c\u6700\u540e\u662f\u8bf7\u6c42\u4e2d\u7684config\u53c2\u6570\u7684\u914d\u7f6e\uff0c\u8d8a\u5f80\u540e\u7b49\u7ea7\u8d8a\u9ad8\uff0c\u540e\u9762\u7684\u4f1a\u8986\u76d6\u524d\u9762\u7684\u914d\u7f6e\u3002<\/p>\n
                \/\/\u521b\u5efa\u4e00\u4e2a\u5b9e\u4f8b\u7684\u65f6\u5019\u4f1a\u4f7f\u7528libray\u76ee\u5f55\u4e2d\u7684\u9ed8\u8ba4\u914d\u7f6e\n\/\/\u8fd9\u91cctimeout\u914d\u7f6e\u7684\u503c\u4e3a0\uff0c\u6765\u81ea\u4e8elibray\u7684\u9ed8\u8ba4\u503c\nvar instance = axios.create()\n\/\/\u8986\u76d6\u6389library\u7684\u9ed8\u8ba4\u503c\n\/\/\u73b0\u5728\u6240\u6709\u7684\u8bf7\u6c42\u90fd\u8981\u7b492.5S\u4e4b\u540e\u624d\u4f1a\u53d1\u51fa\ninstance.defaults.timeout = 2500\n\/\/\u8fd9\u91cctimeout\u56de\u8986\u76d6\u4e4b\u524d\u76842.5S\u53d8\u62105s\ninstance.get('\/longRequest',{\n  timeout: 5000\n})<\/code><\/pre>\n
                \u62e6\u622a\u5668<\/h2>\n
                  \n
                • \u53ef\u4ee5\u5728\u8bf7\u6c42\u3001\u54cd\u5e94\u5230\u8fbe\u4e4b\u524d\u62e6\u622a\u5904\u7406<\/li>\n<\/ul>\n
                  \/\/\u6dfb\u52a0\u4e00\u4e2a\u8bf7\u6c42\u62e6\u622a\u5668\uff08\u5168\u5c40\uff09\naxios.interceptors.request.use(function(config){\n  \/\/\u5728\u8bf7\u6c42\u53d1\u51fa\u4e4b\u524d\u8fdb\u884c\u4e00\u4e9b\u64cd\u4f5c\n  return config\n}, function(err){\n  \/\/Do something with request error\n  return Promise.reject(error)\n})\n\/\/\u6dfb\u52a0\u4e00\u4e2a\u54cd\u5e94\u62e6\u622a\u5668\uff08\u5168\u5c40\uff09\naxios.interceptors.response.use(function(res){\n  \/\/\u5728\u8fd9\u91cc\u5bf9\u8fd4\u56de\u7684\u6570\u636e\u8fdb\u884c\u5904\u7406\n  return res\n}, function(err){\n  \/\/Do something with response error\n  return Promise.reject(error)\n})<\/code><\/pre>\n
                    \n
                  • \u53d6\u6d88\u62e6\u622a\u5668<\/li>\n<\/ul>\n
                    var myInterceptor = axios.interceptor.request.use(function(){\/*....*\/})\naxios.interceptors.request.eject(myInterceptor)<\/code><\/pre>\n
                      \n
                    • \u7ed9\u81ea\u5b9a\u4e49\u7684axios\u5b9e\u4f8b\u6dfb\u52a0\u62e6\u622a\u5668<\/li>\n<\/ul>\n
                      var instance = axios.create()\ninstance.interceptors.request.use(function(){})<\/code><\/pre>\n
                      \u9519\u8bef\u5904\u7406<\/h2>\n
                      axios.get('\/user\/123456')\n  .catch(function(error){\n    if(error.response){\n      \/\/\u8bf7\u6c42\u5df2\u7ecf\u53d1\u51fa\uff0c\u4f46\u662f\u670d\u52a1\u5668\u54cd\u5e94\u8fd4\u56de\u7684\u72b6\u6001\u7801\u4e0d\u57282xx\u7684\u8303\u56f4\u5185\n      console.log(error.response.data)\n      console.log(error.response.status)\n      console.log(error.response.header)\n    }else{\n      \/\/\u4e00\u4e9b\u9519\u8bef\u662f\u5728\u8bbe\u7f6e\u8bf7\u6c42\u7684\u65f6\u5019\u89e6\u53d1\n      console.log('Error',error.message)\n    }\n    console.log(error.config)\n  })<\/code><\/pre>\n
                      \u53d6\u6d88<\/h2>\n
                        \n
                      • \u53ef\u4ee5\u901a\u8fc7\u4e00\u4e2acancel token\u6765\u53d6\u6d88\u4e00\u4e2a\u8bf7\u6c42<\/li>\n<\/ul>\n
                        \/\/\u53ef\u4ee5\u901a\u8fc7CancelToken.source\u5de5\u5382\u51fd\u6570\u6765\u521b\u5efa\u4e00\u4e2acancel token\nvar CancelToken = axios.CancelToken\nvar source = CancelToken.source()\n\naxios.get('\/user\/123456', {\n  cancelToken: source.token\n}).catch(function(thrown){\n  if(axios.isCancel(thrown)){\n    console.log('Request canceled', thrown.message)\n  }else{\n    \/\/handle error\n  }\n})\n\n\/\/\u53d6\u6d88\u8bf7\u6c42\uff08\u4fe1\u606f\u7684\u53c2\u6570\u53ef\u4ee5\u8bbe\u7f6e\u7684\uff09\nsource.cance("\u64cd\u4f5c\u88ab\u7528\u6237\u53d6\u6d88")<\/code><\/pre>\n
                          \n
                        • \u53ef\u4ee5\u7ed9cancelToken\u6784\u9020\u51fd\u6570\u4f20\u9012\u4e00\u4e2aexecutor function\u6765\u521b\u5efa\u4e00\u4e2acancel token<\/li>\n<\/ul>\n
                          var cancelToken = axios.CancelToken\nvar cance\naxios.get('\/user\/123456', {\n  cancelToken: new CancelToken(function(c){\n    \/\/\u8fd9\u4e2aexecutor\u51fd\u6570\u63a5\u53d7\u4e00\u4e2acancel function\u4f5c\u4e3a\u53c2\u6570\n    cancel = c\n  })\n})\n\/\/\u53d6\u6d88\u8bf7\u6c42\ncancel()<\/code><\/pre>\n","protected":false},"excerpt":{"rendered":"
                          Vue\u66f4\u65b0\u52302.0\u4e4b\u540e\uff0c\u4f5c\u8005\u5c31\u5ba3\u544a\u4e0d\u518d\u5bf9vue-resource\u66f4\u65b0\uff0c\u800c\u662f\u63a8\u8350axios \u5b89\u88c5 1\u3001\u5229\u7528npm […]<\/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":[290,129],"class_list":["post-1055","post","type-post","status-publish","format-standard","hentry","category-vue","tag-axios","tag-http"],"_links":{"self":[{"href":"https:\/\/www.appblog.cn\/index.php\/wp-json\/wp\/v2\/posts\/1055","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=1055"}],"version-history":[{"count":0,"href":"https:\/\/www.appblog.cn\/index.php\/wp-json\/wp\/v2\/posts\/1055\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.appblog.cn\/index.php\/wp-json\/wp\/v2\/media?parent=1055"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.appblog.cn\/index.php\/wp-json\/wp\/v2\/categories?post=1055"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.appblog.cn\/index.php\/wp-json\/wp\/v2\/tags?post=1055"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}