Vue.js教程之axios使用
阿新 • • 發佈：2019-02-10
前言
在學習了之前的路由vue-router和狀態管理vuex之後，就應該是網路互動了。就學習尤大推薦的axios了。剛好本人對網路請求這塊除了會get、put、post和delete這四個方法之外知之甚少，剛好補全上。
注意：Vue官方推薦的網路通訊庫不再是vue-resource了，推薦使用axios。
為何放棄vue-resource？
尤大的原話：
最近團隊討論了一下，Ajax 本身跟 Vue 並沒有什麼需要特別整合的地方，使用 fetch polyfill 或是 axios、superagent 等等都可以起到同等的效果，vue-resource 提供的價值和其維護成本相比並不划算，所以決定在不久以後取消對 vue-resource 的官方推薦。已有的使用者可以繼續使用，但以後不再把 vue-resource 作為官方的 ajax 方案。
axios安裝
npm:
?| 1 |
$ npm install
axios
|
bower:
?| 1 |
$ bower install
axios
|
Using cdn:
基本使用方法
GET請求
?| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
// Make a request for a user with a given ID
axios.get('/user?ID=12345')
.then(function
(response) {
console.log(response);})
.catch(function
(error) {
console.log(error);
});
// Optionally the request above could also be done as
axios.get('/user', {
params: {
ID: 12345
}
})
.then(function
(response) {
console.log(response);
})
.catch(function
(error) {
console.log(error);
});
|
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);
});
|
同時執行多個請求
?| 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) {
// Both requests are now complete
}));
|
其實和其他的ajax庫一樣，基本用法都是差不多的。大家一看就知道怎麼用。
axios API
可以直接通過config來完成請求
axios(config)
?| 1 2 3 4 5 6 7 8 |
axios({
method:
'post',
url:
'/user/12345',
data: {
firstName:
'Fred',
lastName:
'Flintstone'
}
});
|
axios(url, [config])
?| 1 2 |
// Send a GET request (default method)
axios('/user/12345');
|
請求方法別名
下面是axios支援的所有請求方法別名，便於各種請求。
注： [...]中的資料表示可以為空。url是ajax請求地址；data是提交的資料物件；config是配置物件，所有ajax配置都可以在config中實現。
- 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]])
併發性
下列介面用於處理併發請求(同時處理多個多個request)
- axios.all(iterable)
- axios.spread(callback)
axios例項
可以用自定義的config建立一個axios例項
axios.create([config])
?| 1 2 3 4 5 |
var
instance = axios.create({
timeout: 1000,
headers: {'X-Custom-Header':
'foobar'}
});
|
例項方法
下面是例項的所有可用方法，方法中的config會與axios例項中的config合併。（例項可以將一些通用的config先配置好）
- 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]])
Config
重點來了，來看看Config。
下面列出了config的所有配置項，其中之後url是必填的。當method沒有指定方法，預設為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 132 133 134 135 136 137 |
{
// `url` is the server URL that will be used for the request
// 用來向伺服器傳送請求的url
url: '/user',
// `method` is the request method to be used when making the request
// 請求方法
method: 'get', // default
// `baseURL` will be prepended to `url` unless `url` is absolute.
// It can be convenient to set `baseURL` for an instance of axios to pass relative URLs
// to methods of that instance.
// 假如`url`不是絕對路徑，那麼向伺服器傳送請求的URL將是`baseURL + url`
// `transformRequest` allows changes to the request data before it is sent to the server
// This is only applicable for request methods 'PUT', 'POST', and 'PATCH'
// The last function in the array must return a string, an ArrayBuffer, or a Stream
transformRequest: [function (data) {
// Do whatever you want to transform the data
return data;
}],
// `transformResponse` allows changes to the response data to be made before
// it is passed to then/catch
transformResponse: [function (data) {
// Do whatever you want to transform the data
return data;
}],
// `headers` are custom headers to be sent
headers: {'X-Requested-With': 'XMLHttpRequest'},
// `params` are the URL parameters to be sent with the request
// Must be a plain object or a URLSearchParams object
params: {
ID: 12345
},
// `paramsSerializer` is an optional function in charge of serializing `params`
paramsSerializer: function(params) {
return Qs.stringify(params, {arrayFormat: 'brackets'})
},
// `data` is the data to be sent as the request body
// Only applicable for request methods 'PUT', 'POST', and 'PATCH'
// When no `transformRequest` is set, must be of one of the following types:
// - string, plain object, ArrayBuffer, ArrayBufferView, URLSearchParams
// - Browser only: FormData, File, Blob
// - Node only: Stream
data: {
firstName: 'Fred'
},
// `timeout` specifies the number of milliseconds before the request times out.
// If the request takes longer than `timeout`, the request will be aborted.
timeout: 1000,
// `withCredentials` indicates whether or not cross-site Access-Control requests
// should be made using credentials
withCredentials: false, // default
// `adapter` allows custom handling of requests which makes testing easier.
// Return a promise and supply a valid response (see [response docs](#response-api)).
adapter: function (config) {
/* ... */
},
// `auth` indicates that HTTP Basic auth should be used, and supplies credentials.
// This will set an `Authorization` header, overwriting any existing
// `Authorization` custom headers you have set using `headers`.
auth: {
username: 'janedoe',
password: 's00pers3cret'
},
// `responseType` indicates the type of data that the server will respond with
// options are 'arraybuffer', 'blob', 'document', 'json', 'text', 'stream'
responseType: 'json', // default
// `xsrfCookieName` is the name of the cookie to use as a value for xsrf token
xsrfCookieName: 'XSRF-TOKEN', // default
// `xsrfHeaderName` is the name of the http header that carries the xsrf token value
xsrfHeaderName: 'X-XSRF-TOKEN', // default
// `onUploadProgress` allows handling of progress events for uploads
onUploadProgress: function (progressEvent) {
// Do whatever you want with the native progress event
},
// `onDownloadProgress` allows handling of progress events for downloads
onDownloadProgress: function (progressEvent) {
// Do whatever you want with the native progress event
},
// `maxContentLength` defines the max size of the http response content allowed
maxContentLength: 2000,
// `validateStatus` defines whether to resolve or reject the promise for a given
// HTTP response status code. If `validateStatus` returns `true` (or is set to `null`
// or `undefined`), the promise will be resolved; otherwise, the promise will be
// rejected.
validateStatus: function (status) {
return status >= 200 && status < 300; // default
},
// `maxRedirects` defines the maximum number of redirects to follow in node.js.
// If set to 0, no redirects will be followed.
maxRedirects: 5, // default
// `httpAgent` and `httpsAgent` define a custom agent to be used when performing http
// and https requests, respectively, in node.js. This allows to configure options like
// `keepAlive` that are not enabled by default.
httpAgent: new http.Agent({ keepAlive: true }),
httpsAgent: new https.Agent({ keepAlive: true }),
// 'proxy' defines the hostname and port of the proxy server
// `auth` indicates that HTTP Basic auth should be used to connect to the proxy, and supplies credentials.
// This will set an `Proxy-Authorization` header, overwriting any existing `Proxy-Authorization` custom headers you have set using `headers`.
proxy: {
host: '127.0.0.1',
port: 9000,
auth: : {
username: 'mikeymike',
password: 'rapunz3l'
}
},
// `cancelToken` specifies a cancel token that can be used to cancel the request
// (see Cancellation section below for details)
cancelToken: new CancelToken(function (cancel) {
})
}
|
分析Config
配置引數很多，我們一個一個來了解它們
- url —— 用來向伺服器傳送請求的url
- method —— 請求方法，預設是GET方法
- baseURL —— 基礎URL路徑，假如url不是絕對路徑，如https://some-domain.com/api/v1/login?name=jack,那麼向伺服器傳送請求的URL將會是baseURL + url。
- transformRequest —— transformRequest方法允許在請求傳送到伺服器之前修改該請求，此方法只適用於PUT、POST和PATCH方法中。而且，此方法最後必須返回一個string、ArrayBuffer或者Stream。
- transformResponse —— transformResponse方法允許在資料傳遞到then/catch之前修改response資料。此方法最後也要返回資料。
- headers —— 傳送自定義Headers標頭檔案，標頭檔案中包含了http請求的各種資訊。
- params —— params是傳送請求的查詢引數物件，物件中的資料會被拼接成url?param1=value1¶m2=value2。
- paramsSerializer —— params引數序列化器。
- data —— data是在傳送POST、PUT或者PATCH請求的資料物件。
- timeout —— 請求超時設定，單位為毫秒
- withCredentials —— 表明是否有跨域請求需要用到證書
- adapter —— adapter允許使用者處理更易於測試的請求。返回一個Promise和一個有效的response
- auth —— auth表明提供憑證用於完成http的身份驗證。這將會在headers中設定一個Authorization授權資訊。自定義Authorization授權要設定在headers中。
- responseType —— 表示伺服器將返回響應的資料型別，有arraybuffer、blob、document、json、text、stream這6個型別，預設是json類似資料。
- xsrfCookieName —— 用作 xsrf token 值的 cookie 名稱
- xsrfHeaderName —— 帶有 xsrf token 值 http head 名稱
- onUploadProgress —— 允許在上傳過程中的做一些操作
- onDownloadProgress —— 允許在下載過程中的做一些操作
- maxContentLength —— 定義了接收到的response響應資料的最大長度。
- validateStatus —— validateStatus定義了根據HTTP響應狀態碼決定是否接收或拒絕獲取到的promise。如果 validateStatus 返回 true (或設定為 null 或 undefined ),promise將被接收;否則,promise將被拒絕。
- maxRedirects —— maxRedirects定義了在node.js中redirect的最大值，如果設定為0，則沒有redirect。
- httpAgent —— 定義在使用http請求時的代理
- httpsAgent —— 定義在使用https請求時的代理
- proxy —— proxy定義代理伺服器的主機名和埠，auth
- cancelToken —— cancelToken定義一個 cancel token 用於取消請求
Response
當我們ajax獲取資料成功後會返回一個response物件，它包含了以下內容：
?| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
{
// `data` is the response that was provided by the server
data: {},
// `status` is the HTTP status code from the server response
status: 200,
// `statusText` is the HTTP status message from the server response
statusText: 'OK',
// `headers` the headers that the server responded with
headers: {},
// `config` is the config that was provided to `axios` for the request
config: {}
}
|
response是通過promise的then方法來獲取,具體使用方法如下：
?| 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);
});
|
相對的，我們有時也會出現ajax報錯，此時就會到我們的catch中去捕獲異常error物件。
總結
以上就是這篇文章的全部內容了，希望本文的內容對大家的學習或者工作能帶來一定的幫助，如果有疑問大家可以留言交流，謝謝大家對指令碼之家的支援。
原文連結：http://www.jianshu.com/p/8e5fb763c3d7?winzoom=1