全棧的自我修養: Axios 的簡單使用

> You should never judge something you don't understand.
> 你不應該去評判你不瞭解的事物。
[全棧的自我修養: 001環境搭建 (使用Vue,Spring Boot,Flask,Django 完成Vue前後端分離開發)](https://blog.csdn.net/zyndev/article/details/80304547) [全棧的自我修養: 002使用@vue/cli進行vue.js環境搭建 (使用Vue,Spring Boot,Flask,Django 完成Vue前後端分離開發)](https://blog.csdn.net/zyndev/article/details/107013463) [全棧的自我修養: 003Axios 的簡單使用](https://blog.csdn.net/zyndev/article/details/107215871) @[TOC] # 介紹 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])`
> 從方法宣告可以看出
> 1. 第一個引數`url`必填，為請求的url > 2. 第二個引數 `config` 選填, 關於`config` 的屬性見下文 `GET` 方法用來查詢服務資源, 不應該在這裡對服務資源進行修改 1. 使用get 方法進行請求，引數可以直接拼接在 url 中 ```js axios.get('/user?id=12345') .then(response => { // 如果成功返回（http 狀態碼在 200~300），則可獲取對應的 response console.log(response); }) .catch(error => { // 異常 console.log(error); }) .then(() => { // always executed }); ``` 1. 使用get 方法進行請求，引數單獨作為一個物件傳入, 該引數會拼接在url 中 ```js 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])`
> 從方法宣告可以看出 > 1. 第一個引數`url`必填，為請求的url > 2. 第二個引數 `config` 選填, 關於`config` 的屬性見下文 `DELETE` 用來刪除一個資源，不安全但冪等 1. 使用 DELETE 方法進行請求，引數可以直接拼接在 url 中 ```js axios.delete('/user?id=12345') .then(response => { // 如果成功返回（http 狀態碼在 200~300），則可獲取對應的 response console.log(response); }) .catch(error => { // 異常 console.log(error); }) .then(() => { // always executed }); ``` 1. 使用 DELETE 方法進行請求，引數單獨作為一個物件傳入, 該引數會拼接在url 中 ```js 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 }); ``` 3. 使用 DELETE 方法進行請求，引數單獨作為一個物件傳入, 該引數會在請求體中 ```js 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]])`
> 從方法宣告可以看出 > 1. 第一個引數`url`必填，為請求的url > 2. 第二個引數`data`選填，為請求的引數，且在請求體中 > 2. 第二個引數 `config` 選填, 關於`config` 的屬性見下文 1. 不安全但冪等 2. 通過替換的方式更新資源 > 常見使用方式 1. 使用 PUT 方法進行請求，引數可以直接拼接在 url 中 **更新資源** ```js axios.put('/user?id=12345&name=abc') .then(response => { // 如果成功返回（http 狀態碼在 200~300），則可獲取對應的 response console.log(response); }) .catch(error => { // 異常 console.log(error); }) .then(() => { // always executed }); ``` 1. 使用 PUT 方法進行請求，引數單獨作為一個物件傳入, 該引數會在請求體中 ```js 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]])`
> 從方法宣告可以看出 > 1. 第一個引數`url`必填，為請求的url > 2. 第二個引數`data`選填，為請求的引數，且在請求體中 > 2. 第二個引數 `config` 選填, 關於`config` 的屬性見下文 1. 不安全且不冪等 2. 建立資源 > 常見使用方式 1. 使用 POST 方法進行請求，引數可以直接拼接在 url 中 **建立id為123456的使用者** ```js axios.post('/user?id=12345&name=abc') .then(response => { // 如果成功返回（http 狀態碼在 200~300），則可獲取對應的 response console.log(response); }) .catch(error => { // 異常 console.log(error); }) .then(() => { // always executed }); ``` 1. 使用 POST 方法進行請求，引數單獨作為一個物件傳入, 該引數會在請求體中 ```js 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]])`
> 從方法宣告可以看出 > 1. 第一個引數`url`必填，為請求的url > 2. 第二個引數`data`選填，為請求的引數，且在請求體中 > 2. 第二個引數 `config` 選填, 關於`config` 的屬性見下文 1. 不安全且不冪等 2. 在伺服器更新資源（客戶端提供改變的屬性，部分更新） > 常見使用方式 1. 使用 PATCH 方法進行請求，引數可以直接拼接在 url 中 **更新id為123456的使用者資源** ```js axios.patch('/user?id=12345&name=abc') .then(response => { // 如果成功返回（http 狀態碼在 200~300），則可獲取對應的 response console.log(response); }) .catch(error => { // 異常 console.log(error); }) .then(() => { // always executed }); ``` 1. 使用 PATCH 方法進行請求，引數單獨作為一個物件傳入, 該引數會在請求體中 ```js 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 }); ``` ## 彙總 從上面的示例中可以看出 ```js 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` ```js const params = new URLSearchParams(); params.append('id', '123456'); params.append('name', 'abc'); axios.post('/user', params); ``` 其中 URLSearchParams 存在相容問題，具體可見[caniuse](https://www.caniuse.com/#feat=urlsearchparams) ## 方式二：使用 `qs` 進行編碼 ```js import qs from 'qs'; axios.post('/user', qs.stringify({ id: 123456, name: "abc" })); ``` # 使用 `multipart/form-data` ```js const form = new FormData(); form.append('id', 123456); form.append('name', "abc"); axios.post('user', form, { headers: form.getHeaders() }) ``` # Response 結構 ```js { // `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 常用配置 ```js { // `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` # 參考 1. https://github.com/axi