全棧的自我修養: 003Axios 的簡單使用
阿新 • • 發佈：2020-07-14
全棧的自我修養: Axios 的簡單使用
You should never judge something you don't understand.
你不應該去評判你不瞭解的事物。
全棧的自我修養: 001環境搭建 (使用Vue,Spring Boot,Flask,Django 完成Vue前後端分離開發)
全棧的自我修養: 002使用@vue/cli進行vue.js環境搭建 (使用Vue,Spring Boot,Flask,Django 完成Vue前後端分離開發)
@ 目錄
介紹
Axios 是一個基於 Promise 的 HTTP 庫，可以用在瀏覽器和 node.js 中。
Github開源地址： https://github.com/axios/axios
如果你原來用過 jQuery 應該還記的 $.ajax 方法吧
簡單使用
如果按照HTTP方法的語義來暴露資源，那麼介面將會擁有安全性和冪等性的特性，例如GET和HEAD請求都是安全的， 無論請求多少次，都不會改變伺服器狀態。而GET、HEAD、PUT和DELETE請求都是冪等的，無論對資源操作多少次， 結果總是一樣的，後面的請求並不會產生比第一次更多的影響。
下面列出了 GET，DELETE，PUT, PATCH 和 POST 的典型用法:
GET
axios#get(url[, config])
從方法宣告可以看出
- 第一個引數
url必填，為請求的url- 第二個引數
config選填, 關於config的屬性見下文
GET 方法用來查詢服務資源, 不應該在這裡對服務資源進行修改
- 使用get 方法進行請求，引數可以直接拼接在 url 中
axios.get('/user?id=12345')
.then(response => {
// 如果成功返回（http 狀態碼在 200~300），則可獲取對應的 response
console.log(response);
.catch(error => {
// 異常
console.log(error);
})
.then(() => {
// always executed
});
- 使用get 方法進行請求，引數單獨作為一個物件傳入, 該引數會拼接在url 中
let request_params = { id: 123456 }
axios.get('/user', {
params: request_params
})
.then(function (response) {
console.log(response);
})
.catch(function (error) {
console.log(error);
})
.then(function () {
// always executed
});
DELETE
axios#delete(url[, config])
從方法宣告可以看出
- 第一個引數
url必填，為請求的url- 第二個引數
config選填, 關於config的屬性見下文
DELETE 用來刪除一個資源，不安全但冪等
- 使用 DELETE 方法進行請求，引數可以直接拼接在 url 中
axios.delete('/user?id=12345')
.then(response => {
// 如果成功返回（http 狀態碼在 200~300），則可獲取對應的 response
console.log(response);
})
.catch(error => {
// 異常
console.log(error);
})
.then(() => {
// always executed
});
- 使用 DELETE 方法進行請求，引數單獨作為一個物件傳入, 該引數會拼接在url 中
let request_params = { id: 123456 }
axios.delete('/user', {
params: request_params
})
.then(function (response) {
console.log(response);
})
.catch(function (error) {
console.log(error);
})
.then(function () {
// always executed
});
- 使用 DELETE 方法進行請求，引數單獨作為一個物件傳入, 該引數會在請求體中
let request_params = { id: 123456 }
axios.delete('/user', {
data: request_params
})
.then(function (response) {
console.log(response);
})
.catch(function (error) {
console.log(error);
})
.then(function () {
// always executed
});
PUT
axios#put(url[, data[, config]])
從方法宣告可以看出
- 第一個引數
url必填，為請求的url- 第二個引數
data選填，為請求的引數，且在請求體中- 第二個引數
config選填, 關於config的屬性見下文
- 不安全但冪等
- 通過替換的方式更新資源
常見使用方式
- 使用 PUT 方法進行請求，引數可以直接拼接在 url 中
更新資源
axios.put('/user?id=12345&name=abc')
.then(response => {
// 如果成功返回（http 狀態碼在 200~300），則可獲取對應的 response
console.log(response);
})
.catch(error => {
// 異常
console.log(error);
})
.then(() => {
// always executed
});
- 使用 PUT 方法進行請求，引數單獨作為一個物件傳入, 該引數會在請求體中
let request_params = { id: 123456, name: "abc" }
axios.post('/user', request_params,
.then(function (response) {
console.log(response);
})
.catch(function (error) {
console.log(error);
})
.then(function () {
// always executed
});
POST
axios#post(url[, data[, config]])
從方法宣告可以看出
- 第一個引數
url必填，為請求的url- 第二個引數
data選填，為請求的引數，且在請求體中- 第二個引數
config選填, 關於config的屬性見下文
- 不安全且不冪等
- 建立資源
常見使用方式
- 使用 POST 方法進行請求，引數可以直接拼接在 url 中
建立id為123456的使用者
axios.post('/user?id=12345&name=abc')
.then(response => {
// 如果成功返回（http 狀態碼在 200~300），則可獲取對應的 response
console.log(response);
})
.catch(error => {
// 異常
console.log(error);
})
.then(() => {
// always executed
});
- 使用 POST 方法進行請求，引數單獨作為一個物件傳入, 該引數會在請求體中
let request_params = { id: 123456, name: "abc" }
axios.post('/user', request_params,
.then(function (response) {
console.log(response);
})
.catch(function (error) {
console.log(error);
})
.then(function () {
// always executed
});
PATCH
axios.patch(url[, data[, config]])
從方法宣告可以看出
- 第一個引數
url必填，為請求的url- 第二個引數
data選填，為請求的引數，且在請求體中- 第二個引數
config選填, 關於config的屬性見下文
- 不安全且不冪等
- 在伺服器更新資源（客戶端提供改變的屬性，部分更新）
常見使用方式
- 使用 PATCH 方法進行請求，引數可以直接拼接在 url 中
更新id為123456的使用者資源
axios.patch('/user?id=12345&name=abc')
.then(response => {
// 如果成功返回（http 狀態碼在 200~300），則可獲取對應的 response
console.log(response);
})
.catch(error => {
// 異常
console.log(error);
})
.then(() => {
// always executed
});
- 使用 PATCH 方法進行請求，引數單獨作為一個物件傳入, 該引數會在請求體中
let request_params = { id: 123456, name: "abc" }
axios.patch('/user', request_params,
.then(function (response) {
console.log(response);
})
.catch(function (error) {
console.log(error);
})
.then(function () {
// always executed
});
彙總
從上面的示例中可以看出
axios.get(url[, config])
axios.delete(url[, config])
axios.post(url[, data[, config]])
axios.put(url[, data[, config]])
axios.patch(url[, data[, config]])
其中 POST、PUT、PATCH 的使用方式是一致的，只是方式名和 http method 存在差異, 那他們的區別在什麼地方呢
GET：從伺服器取出資源（一項或多項）。
POST：在伺服器新建一個資源。
PUT：在伺服器更新資源（客戶端提供改變後的完整資源）。
PATCH：在伺服器更新資源（客戶端提供改變的屬性）。
DELETE：從伺服器刪除資源。
使用 application/x-www-form-urlencoded
在預設情況下，data 中資料採用了 JSON 序列化方式，即 Content-Type: application/json, 如果想使用 application/x-www-form-urlencoded, 則需要做特殊處理
方式一：使用 URLSearchParams
const params = new URLSearchParams();
params.append('id', '123456');
params.append('name', 'abc');
axios.post('/user', params);
其中 URLSearchParams 存在相容問題，具體可見caniuse
方式二：使用 qs 進行編碼
import qs from 'qs';
axios.post('/user', qs.stringify({ id: 123456, name: "abc" }));
使用 multipart/form-data
const form = new FormData();
form.append('id', 123456);
form.append('name', "abc");
axios.post('user', form, { headers: form.getHeaders() })
Response 結構
{
// `data` is the response that was provided by the server
// response 返回資料
data: {},
// `status` is the HTTP status code from the server response
// 狀態碼
status: 200,
// `statusText` is the HTTP status message from the server response
// 狀態碼對應的標準message
statusText: 'OK',
// `headers` the HTTP headers that the server responded with
// All header names are lower cased and can be accessed using the bracket notation.
// Example: `response.headers['content-type']`
// 響應頭
headers: {},
// `config` is the config that was provided to `axios` for the request
config: {},
// `request` is the request that generated this response
// It is the last ClientRequest instance in node.js (in redirects)
// and an XMLHttpRequest instance in the browser
request: {}
}
Config 常用配置
{
// `url` is the server URL that will be used for the request
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.
baseURL: 'https://some-domain.com/api/',
// `transformRequest` allows changes to the request data before it is sent to the server
// This is only applicable for request methods 'PUT', 'POST', 'PATCH' and 'DELETE'
// The last function in the array must return a string or an instance of Buffer, ArrayBuffer,
// FormData or Stream
// You may modify the headers object.
transformRequest: [function (data, headers) {
// 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`
// (e.g. https://www.npmjs.com/package/qs, http://api.jquery.com/jquery.param/)
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', 'DELETE , 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, Buffer
data: {
firstName: 'Fred'
},
// syntax alternative to send data into the body
// method post
// only the value is sent, not the key
data: 'Country=Brasil&City=Belo Horizonte',
// `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, // default is `0` (no timeout)
// `withCredentials` indicates whether or not cross-site Access-Control requests
// should be made using credentials
withCredentials: false, // default
// `auth` indicates that HTTP Basic auth should be used, and supplies credentials.
auth: {
username: 'janedoe',
password: 's00pers3cret'
},
// `responseType` indicates the type of data that the server will respond with
// options are: 'arraybuffer', 'document', 'json', 'text', 'stream'
// browser only: 'blob'
responseType: 'json', // default
// `responseEncoding` indicates encoding to use for decoding responses (Node.js only)
// Note: Ignored for `responseType` of 'stream' or client-side requests
responseEncoding: 'utf8', // default
// `maxContentLength` defines the max size of the http response content in bytes allowed in node.js
maxContentLength: 2000,
// `maxBodyLength` (Node only option) defines the max size of the http request content in bytes allowed
maxBodyLength: 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
},
}
更多配置參考 https://github.com/axios/axios