九色国产,午夜在线视频,新黄色网址,九九色综合,天天做夜夜做久久做狠狠,天天躁夜夜躁狠狠躁2021a,久久不卡一区二区三区

打開APP
userphoto
未登錄

開通VIP，暢享免費電子書等14項超值服

開通VIP

首頁

好書

留言交流

下載APP

聯(lián)系客服
vue axios全攻略

不再繼續(xù)維護vue-resource，并推薦大家使用 axios 開始，axios 被越來越多的人所了解。本來想在網(wǎng)上找找詳細攻略，突然發(fā)現(xiàn)，axios 的官方文檔本身就非常詳細！！有這個還要什么自行車?。∷酝扑]大家學(xué)習(xí)這種庫，最好詳細閱讀其官方文檔。大概翻譯了一下 axios 的官方文檔，相信大家只要吃透本文再加以實踐，axios 就是小意思啦??！

如果您覺得本文對您有幫助，不妨點個贊或關(guān)注收藏一下，您的鼓勵對我非常重要。

axios 簡介

axios 是一個基于Promise 用于瀏覽器和 nodejs 的 HTTP 客戶端，它本身具有以下特征：

  • 從瀏覽器中創(chuàng)建 XMLHttpRequest
  • 從 node.js 發(fā)出 http 請求
  • 支持 Promise API
  • 攔截請求和響應(yīng)
  • 轉(zhuǎn)換請求和響應(yīng)數(shù)據(jù)
  • 取消請求
  • 自動轉(zhuǎn)換JSON數(shù)據(jù)
  • 客戶端支持防止 CSRF/XSRF

瀏覽器兼容性

引入方式：

1
2
3
4
5
$ npm install axios
$ cnpm install axios //taobao源
$ bower install axios
或者使用cdn：
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

舉個栗子：

執(zhí)行 GET 請求

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
// 向具有指定ID的用戶發(fā)出請求
axios.get('/user?ID=12345')
.then(function (response) {
console.log(response);
})
.catch(function (error) {
console.log(error);
});
// 也可以通過 params 對象傳遞參數(shù)
axios.get('/user', {
params: {
ID: 12345
}
})
.then(function (response) {
console.log(response);
})
.catch(function (error) {
console.log(error);
});

執(zhí)行 POST 請求

1
2
3
4
5
6
7
8
9
10
axios.post('/user', {
firstName: 'Fred',
lastName: 'Flintstone'
})
.then(function (response) {
console.log(response);
})
.catch(function (error) {
console.log(error);
});

執(zhí)行多個并發(fā)請求

1
2
3
4
5
6
7
8
9
10
11
12
function getUserAccount() {
return axios.get('/user/12345');
}
function getUserPermissions() {
return axios.get('/user/12345/permissions');
}
axios.all([getUserAccount(), getUserPermissions()])
.then(axios.spread(function (acct, perms) {
//兩個請求現(xiàn)已完成
}));

axios API

可以通過將相關(guān)配置傳遞給 axios 來進行請求。

axios(config)

1
2
3
4
5
6
7
8
9
// 發(fā)送一個 POST 請求
axios({
method: 'post',
url: '/user/12345',
data: {
firstName: 'Fred',
lastName: 'Flintstone'
}
});

axios(url[, config])

1
2
// 發(fā)送一個 GET 請求 (GET請求是默認請求模式)
axios('/user/12345');

請求方法別名

為了方便起見，已經(jīng)為所有支持的請求方法提供了別名。

  • axios.request（config）
  • axios.get（url [，config]）
  • axios.delete（url [，config]）
  • axios.head（url [，config]）
  • axios.post（url [，data [，config]]）
  • axios.put（url [，data [，config]]）
  • axios.patch（url [，data [，config]]）

注意
當(dāng)使用別名方法時，不需要在config中指定url，method和data屬性。

并發(fā)

幫助函數(shù)處理并發(fā)請求。

  • axios.all（iterable）
  • axios.spread（callback）

創(chuàng)建實例

您可以使用自定義配置創(chuàng)建axios的新實例。

axios.create（[config]）

1
2
3
4
5
var instance = axios.create({
baseURL: 'https://some-domain.com/api/',
timeout: 1000,
headers: {'X-Custom-Header': 'foobar'}
});

實例方法

可用的實例方法如下所示。 指定的配置將與實例配置合并。

axios＃request（config）
axios＃get（url [，config]）
axios＃delete（url [，config]）
axios＃head（url [，config]）
axios＃post（url [，data [，config]]）
axios＃put（url [，data [，config]]）
axios＃patch（url [，data [，config]]）

請求配置

這些是用于發(fā)出請求的可用配置選項。 只有url是必需的。 如果未指定方法，請求將默認為GET。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
{
// `url`是將用于請求的服務(wù)器URL
url: '/user',
// `method`是發(fā)出請求時使用的請求方法
method: 'get', // 默認
// `baseURL`將被添加到`url`前面，除非`url`是絕對的。
// 可以方便地為 axios 的實例設(shè)置`baseURL`，以便將相對 URL 傳遞給該實例的方法。
baseURL: 'https://some-domain.com/api/',
// `transformRequest`允許在請求數(shù)據(jù)發(fā)送到服務(wù)器之前對其進行更改
// 這只適用于請求方法'PUT'，'POST'和'PATCH'
// 數(shù)組中的最后一個函數(shù)必須返回一個字符串，一個 ArrayBuffer或一個 Stream
transformRequest: [function (data) {
// 做任何你想要的數(shù)據(jù)轉(zhuǎn)換
return data;
}],
// `transformResponse`允許在 then / catch之前對響應(yīng)數(shù)據(jù)進行更改
transformResponse: [function (data) {
// Do whatever you want to transform the data
return data;
}],
// `headers`是要發(fā)送的自定義 headers
headers: {'X-Requested-With': 'XMLHttpRequest'},
// `params`是要與請求一起發(fā)送的URL參數(shù)
// 必須是純對象或URLSearchParams對象
params: {
ID: 12345
},
// `paramsSerializer`是一個可選的函數(shù)，負責(zé)序列化`params`
// (e.g. https://www.npmjs.com/package/qs, http://api.jquery.com/jquery.param/)
paramsSerializer: function(params) {
return Qs.stringify(params, {arrayFormat: 'brackets'})
},
// `data`是要作為請求主體發(fā)送的數(shù)據(jù)
// 僅適用于請求方法“PUT”，“POST”和“PATCH”
// 當(dāng)沒有設(shè)置`transformRequest`時，必須是以下類型之一：
// - string, plain object, ArrayBuffer, ArrayBufferView, URLSearchParams
// - Browser only: FormData, File, Blob
// - Node only: Stream
data: {
firstName: 'Fred'
},
// `timeout`指定請求超時之前的毫秒數(shù)。
// 如果請求的時間超過'timeout'，請求將被中止。
timeout: 1000,
// `withCredentials`指示是否跨站點訪問控制請求
// should be made using credentials
withCredentials: false, // default
// `adapter'允許自定義處理請求，這使得測試更容易。
// 返回一個promise并提供一個有效的響應(yīng)（參見[response docs]（＃response-api））
adapter: function (config) {
/* ... */
},
// `auth'表示應(yīng)該使用 HTTP 基本認證，并提供憑據(jù)。
// 這將設(shè)置一個`Authorization'頭，覆蓋任何現(xiàn)有的`Authorization'自定義頭，使用`headers`設(shè)置。
auth: {
username: 'janedoe',
password: 's00pers3cret'
},
// “responseType”表示服務(wù)器將響應(yīng)的數(shù)據(jù)類型
// 包括 'arraybuffer', 'blob', 'document', 'json', 'text', 'stream'
responseType: 'json', // default
//`xsrfCookieName`是要用作 xsrf 令牌的值的cookie的名稱
xsrfCookieName: 'XSRF-TOKEN', // default
// `xsrfHeaderName`是攜帶xsrf令牌值的http頭的名稱
xsrfHeaderName: 'X-XSRF-TOKEN', // default
// `onUploadProgress`允許處理上傳的進度事件
onUploadProgress: function (progressEvent) {
// 使用本地 progress 事件做任何你想要做的
},
// `onDownloadProgress`允許處理下載的進度事件
onDownloadProgress: function (progressEvent) {
// Do whatever you want with the native progress event
},
// `maxContentLength`定義允許的http響應(yīng)內(nèi)容的最大大小
maxContentLength: 2000,
// `validateStatus`定義是否解析或拒絕給定的promise
// HTTP響應(yīng)狀態(tài)碼。如果`validateStatus`返回`true`（或被設(shè)置為`null` promise將被解析;否則，promise將被
  // 拒絕。
validateStatus: function (status) {
return status >= 200 && status < 300; // default
},
// `maxRedirects`定義在node.js中要遵循的重定向的最大數(shù)量。
// 如果設(shè)置為0，則不會遵循重定向。
maxRedirects: 5, // 默認
// `httpAgent`和`httpsAgent`用于定義在node.js中分別執(zhí)行http和https請求時使用的自定義代理。
// 允許配置類似`keepAlive`的選項，
// 默認情況下不啟用。
httpAgent: new http.Agent({ keepAlive: true }),
httpsAgent: new https.Agent({ keepAlive: true }),
// 'proxy'定義代理服務(wù)器的主機名和端口
// `auth`表示HTTP Basic auth應(yīng)該用于連接到代理，并提供credentials。
// 這將設(shè)置一個`Proxy-Authorization` header，覆蓋任何使用`headers`設(shè)置的現(xiàn)有的`Proxy-Authorization` 自定義 headers。
proxy: {
host: '127.0.0.1',
port: 9000,
auth: : {
username: 'mikeymike',
password: 'rapunz3l'
}
},
// “cancelToken”指定可用于取消請求的取消令牌
// (see Cancellation section below for details)
cancelToken: new CancelToken(function (cancel) {
})
}

使用 then 時，您將收到如下響應(yīng)：

1
2
3
4
5
6
7
8
axios.get('/user/12345')
.then(function(response) {
console.log(response.data);
console.log(response.status);
console.log(response.statusText);
console.log(response.headers);
console.log(response.config);
});

配置默認值

您可以指定將應(yīng)用于每個請求的配置默認值。

全局axios默認值

1
2
3
axios.defaults.baseURL = 'https://api.example.com';
axios.defaults.headers.common['Authorization'] = AUTH_TOKEN;
axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded';

自定義實例默認值

1
2
3
4
5
6
7
//在創(chuàng)建實例時設(shè)置配置默認值
var instance = axios.create（{
   baseURL：'https://api.example.com'
}）;
//在實例創(chuàng)建后改變默認值
instance.defaults.headers.common ['Authorization'] = AUTH_TOKEN;

配置優(yōu)先級順序

配置將與優(yōu)先順序合并。 順序是lib / defaults.js中的庫默認值，然后是實例的defaults屬性，最后是請求的config參數(shù)。 后者將優(yōu)先于前者。 這里有一個例子。

1
2
3
4
5
6
7
8
9
10
11
12
//使用庫提供的配置默認值創(chuàng)建實例
//此時，超時配置值為`0`，這是庫的默認值
var instance = axios.create（）;
//覆蓋庫的超時默認值
//現(xiàn)在所有請求將在超時前等待2.5秒
instance.defaults.timeout = 2500;
//覆蓋此請求的超時，因為它知道需要很長時間
instance.get（'/ longRequest'，{
   timeout：5000
}）;

攔截器

你可以截取請求或響應(yīng)在被 then 或者 catch 處理之前

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
//添加請求攔截器
axios.interceptors.request.use（function（config）{
     //在發(fā)送請求之前做某事
     return config;
   }，function（error）{
     //請求錯誤時做些事
     return Promise.reject（error）;
   }）;
//添加響應(yīng)攔截器
axios.interceptors.response.use（function（response）{
     //對響應(yīng)數(shù)據(jù)做些事
     return response;
   }，function（error）{
     //請求錯誤時做些事
     return Promise.reject（error）;
   }）;

如果你以后可能需要刪除攔截器。

1
2
var myInterceptor = axios.interceptors.request.use(function () {/*...*/});
axios.interceptors.request.eject(myInterceptor);

你可以將攔截器添加到axios的自定義實例。

1
2
var instance = axios.create();
instance.interceptors.request.use(function () {/*...*/});

處理錯誤

1
2
3
4
5
6
7
8
9
10
11
12
13
14
axios.get（'/ user / 12345'）
   .catch（function（error）{
     if（error.response）{
       //請求已發(fā)出，但服務(wù)器使用狀態(tài)代碼進行響應(yīng)
       //落在2xx的范圍之外
       console.log（error.response.data）;
       console.log（error.response.status）;
       console.log（error.response.headers）;
     } else {
       //在設(shè)置觸發(fā)錯誤的請求時發(fā)生了錯誤
       console.log（'Error'，error.message）;
     }}
     console.log（error.config）;
   }）;

您可以使用validateStatus配置選項定義自定義HTTP狀態(tài)碼錯誤范圍。

1
2
3
4
5
axios.get（'/ user / 12345'，{
   validateStatus：function（status）{
     return status < 500; //僅當(dāng)狀態(tài)代碼大于或等于500時拒絕
   }}
}）

消除

您可以使用取消令牌取消請求。

axios cancel token API基于可取消的promise提議，目前處于階段1。

您可以使用CancelToken.source工廠創(chuàng)建一個取消令牌，如下所示：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
var CancelToken = axios.CancelToken;
var source = CancelToken.source（）;
axios.get('/user/12345', {
cancelToken: source.token
}).catch(function(thrown) {
if (axios.isCancel(thrown)) {
console.log('Request canceled', thrown.message);
} else {
// 處理錯誤
}
});
//取消請求（消息參數(shù)是可選的）
source.cancel（'操作被用戶取消。'）;

您還可以通過將執(zhí)行器函數(shù)傳遞給CancelToken構(gòu)造函數(shù)來創(chuàng)建取消令牌：

1
2
3
4
5
6
7
8
9
10
11
12
var CancelToken = axios.CancelToken;
var cancel;
axios.get（'/ user / 12345'，{
   cancelToken：new CancelToken（function executor（c）{
     //一個執(zhí)行器函數(shù)接收一個取消函數(shù)作為參數(shù)
     cancel = c;
   }）
}）;
// 取消請求
clear();

注意：您可以使用相同的取消令牌取消幾個請求。

使用application / x-www-form-urlencoded格式

默認情況下，axios將JavaScript對象序列化為JSON。 要以應(yīng)用程序/ x-www-form-urlencoded格式發(fā)送數(shù)據(jù)，您可以使用以下選項之一。

瀏覽器

在瀏覽器中，您可以使用URLSearchParams API，如下所示：

1
2
3
4
var params = new URLSearchParams();
params.append('param1', 'value1');
params.append('param2', 'value2');
axios.post('/foo', params);

請注意，所有瀏覽器都不支持URLSearchParams，但是有一個polyfill可用（確保polyfill全局環(huán)境）。

或者，您可以使用qs庫對數(shù)據(jù)進行編碼：

1
2
var qs = require('qs');
axios.post('/foo', qs.stringify({ 'bar': 123 });

Node.js

在node.js中，可以使用querystring模塊，如下所示：

1
2
var querystring = require('querystring');
axios.post('http://something.com/', querystring.stringify({ foo: 'bar' });

你也可以使用qs庫。

Promise

axios 依賴本機要支持ES6 Promise實現(xiàn)。 如果您的環(huán)境不支持ES6 Promises，您可以使用polyfill。

TypeScript

axios包括TypeScript定義。

1
2
import axios from 'axios';
axios.get('/user?ID=12345');

axios在很大程度上受到Angular提供的$http服務(wù)的啟發(fā)。 最終，axios努力提供一個在Angular外使用的獨立的$http-like服務(wù)。

本站僅提供存儲服務(wù)，所有內(nèi)容均由用戶發(fā)布，如發(fā)現(xiàn)有害或侵權(quán)內(nèi)容，請點擊舉報。
打開APP，閱讀全文并永久保存 查看更多類似文章
猜你喜歡
類似文章
前端領(lǐng)域如何實現(xiàn)請求中斷
<div></div>axios詳解_普通網(wǎng)友的博客
vue+axios自己踩過的坑
axios 是如何封裝 HTTP 請求的
微信公眾號網(wǎng)頁調(diào)用微信掃一掃，nodejs后端
vue 使用 axios 設(shè)置請求帶上cookie
更多類似文章 >>
生活服務(wù)
熱點新聞
分享 收藏 導(dǎo)長圖 關(guān)注 下載文章
綁定賬號成功
后續(xù)可登錄賬號暢享VIP特權(quán)！
如果VIP功能使用有故障，
可點擊這里聯(lián)系客服！

聯(lián)系客服