簡介:

Axios 是基於 Promise 的 HTTP庫。
可應用在「瀏覽器環境」與「Node.js」環境中。在瀏覽器環境下使用了 XMLHttpRequest，而在 Node.js 環境則使用了 http 模組。

Axios特性

1、可以在瀏覽器中發送 XMLHttpRequests
2、可以在 node.js 發送 http 請求
3、支持 Promise API
4、攔截請求和響應
5、轉換請求數據和響應數據
6、能夠取消請求
7、自動轉換 JSON 數據
8、客戶端支持保護安全免受 XSRF 攻擊

• XSRF
  跨站請求偽造（英語：Cross-site request forgery），也被稱為 one-click attack
   或者 session riding，通常縮寫為 CSRF 或者 XSRF， 是一種挾制使用者在當前已登入的Web應用程式上執行非本意的操作的攻擊方法。
  ——-資料來自維基百科

使用場合:
瀏覽器發送請求(get、post)，或者Node.js發送請求都可以用到Axios。
不過如果程式碼中已使用了JQuery，由於他本身就可以發送請求，這時就不需要特別去使用Axios了。

• 補充
  axios 回傳並非直接是資料
  response結構:

  {
    data: {}, // `data` 由server提供的response
    status: 200, // HTTP status code from the server response
    statusText: 'OK', //HTTP status message from the server response
    // `headers` 是server 回應的HTTP headers， header 都是小寫，而且可以使用方括號語法訪問
    // 例如: `response.headers['content-type']`
    headers: {},
    config: {},// `config` 是 `axios` 請求的配置信息
    // `request` is the request that generated this response
    // 在node.js中它是Lasest ClientRequest實例 (in redirects)，
    // 在瀏覽器中是 XMLHttpRequest 實例
    request: {}
  }
  

• 差異
  什麼是GET和POST請求
  GET：向指定路徑資源發送請求，通常用於獲取數據
  POST：向指定路徑資源提交數據進行處理請求，通常用於提交表單或者上傳文件
  GET和POST請求的區別
  1、GET一般是從伺服器上獲取數據，POST是向伺服器提交數據。
  2、GET通過URL提交數據，數據在URL中可以看到，POST則是在HEADER內提交。
  3、GET提交的數據不能大於2KB，而POST不受限制。
  4、GET數據容易泄露，POST較為安全
  原文網址：每日頭條

使用範例:
GET / POST 基礎用法
GET:

const axios = require('axios').default;
// 利用require()，可在導入時獲得typeScript類型

// 網址直接帶上參數
axios.get('/user?ID=12345')
  .then((response) => { console.log(response) })  // handle success
  .catch((error) => { console.log(error) })   // handle error
  .then(() => { // always executed });

// 透過object帶入參數
axios.get('/user', { params: { ID: 12345 } }).then(()=>{})...

POST:

axios.post('/user', {
    firstName: 'Fred',
    lastName: 'Flintstone'
  })
  .then((response) => { console.log(response) })
  .catch((error) => { console.log(error) });

也有這些使用範例
axios(config)

axios({
  method: 'post',
  url: '/user/12345',
  data: {
    firstName: 'Fred',
    lastName: 'Flintstone'
  }
});

axios({
    method: 'get',
    url: '/user?ID=12345'
})
.then((response) => console.log(response))
.catch((error) => console.log(error))

// data：傳送給伺服器的資料
// params：在URL裏要加上的参數

axios(url[, config])

// 發起一个 GET 请求 (默認請求方式)
axios('/user/12345');

當使用的 API 數量龐大時時，也可以使用 axios.create() 來做基礎設定減少重複程式碼。
axios.create([config])

// 預設axios裏的config物件
const instance = axios.create({
  baseURL: 'https://some-domain.com/api/',
  timeout: 1000,
  headers: {'X-Custom-Header': 'foobar'}
});