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

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

參考

https://github.com/axios/axios

《前端的自我修養》
2018-04-26
前端
全棧的自我修養: 0005 Java 包掃描實現和應用(Jar篇)
2020-07-24
全棧JavaJAR
全棧的自我修養: 001環境搭建 (使用Vue,Spring Boot,Flask,Django 完成Vue前後端分離開發)
2020-06-29
全棧VueSpring BootFlaskDjango後端
「認知」打工人的自我修養
2023-01-12
IT技術人員的自我修養
2020-08-20
執行緒池的自我修養
2019-04-06
執行緒
安全研究者的自我修養
2019-01-20
侃透了:運維人的自我修養
2023-03-20
運維
IT技術管理者的自我修養
2019-08-05
論漏洞管理平臺的自我修養
2021-07-20
Preact：一個備胎的自我修養
2019-03-03
React
一位賭狗前端的自我修養
2018-11-21
前端
切圖崽的自我修養－梳理Jquery API
2019-02-16
jQueryAPI
一個野生程式設計師的自我修養
2019-08-12
程式設計師
Kafka實戰(三) - Kafka的自我修養與定位
2020-01-23
Kafka
《蝙蝠的“自我修養”》專案詳細介紹
2020-03-23
切圖崽的自我修養－SeaJs重要概念剖析
2019-02-16
JS
演員的自我修養：網路電影的顛覆與自我顛覆
2020-01-15
執行時應用自我保護（RASP）：應用安全的自我修養
2022-06-23
一個優秀程式設計師的自我修養：當然不止會用代理ip那麼簡單
2018-11-07
程式設計師
程式設計師的自我修養-編譯連結
2023-03-26
程式設計師編譯
遊戲設計師的自我修養（三）：理解玩家
2019-07-15
遊戲設計師
遊戲運營的自我修養：細緻、高效、敏感
2019-06-21
遊戲
《程式設計師的自我修養》-讀書筆記
2019-01-03
程式設計師筆記
遊戲策劃的自我修養-核心競爭力篇
2019-08-16
遊戲
切圖崽的自我修養－－[BUILD]構建工具思路梳理
2019-02-16
UI
程式設計師的自我修養筆記之裝載
2019-02-25
程式設計師筆記
一個實時精準觸達系統的自我修養
2019-12-12
很認真的談一談程式設計師的自我修養
2020-11-24
程式設計師
切圖崽的自我修養－優化圖片載入流程
2019-02-16
優化
《程式設計師的自我修養》（三）——庫與執行庫
2018-07-12
程式設計師
一個程式的自我修養「GitHub 熱點速覽 v.22.19」
2022-05-09
Github
論軟體工程師的自我修養：角色、重構與質量
2020-10-10
軟體工程工程師
遊戲設計師的自我修養（一）：認識玩家，理解玩家
2019-06-18
遊戲設計師
遊戲設計師的自我修養（一）：認識玩家、理解玩家
2019-05-16
遊戲設計師
切圖崽的自我修養－[ES6] 迭代器Iterator淺析
2019-02-16
切圖崽的自我修養－模組外掛化書寫方式
2019-02-16
《程式設計師的自我修養筆記之靜態連結》
2019-02-18
程式設計師筆記

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

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

介紹

簡單使用

GET

DELETE

PUT

POST

PATCH

彙總

使用 application/x-www-form-urlencoded

方式一：使用 URLSearchParams

方式二：使用 qs 進行編碼

使用 multipart/form-data

Response 結構

Config 常用配置

參考

相關文章

使用 `application/x-www-form-urlencoded`

方式一：使用 `URLSearchParams`

方式二：使用 `qs` 進行編碼

使用 `multipart/form-data`