request 請求比較

Node.js request 請求比較
Categories:
Tags:

XMLHttpRequest

最基本最原生的JS請求方法，今天有多個請求，並且有先後關係，就會出現一個 callback hell 的狀況，所以才衍生出 jQuery 的 Ajax 封裝。

// 要使用，要先new一個XHR的物件
var request = new XMLHttpRequest()
// 然後定義連線方式(get / post ...)
request.open('get',"http://www.example.org/example.txt")
// 發送請求
request.send()
// 如果成功就doSuccessFunc()
request.onload = doSuccessFunc
// 如果失敗就doFalseFunc()
request.onerror = reqError;

jQuery

$.ajax({
  methods:'get',

  url:'https://www.example.org/example.txt',

  dataType:'json', //xml, html, script, json, jsonp, text

  success: function(data){
    console.log(data)
  },
})

在現代前端框架的興起下，jQuery逐漸式微，式微原因有

  • 本身是對 MVC 的編成，不符合現在前端 MVVM 的浪潮
  • 基於原生的 XH R開發，XHR 本身的架構不清晰，現在已經有了 fetch 的替代方案。
  • jQuery 的整個項目太大，單純使用 ajax 卻要引入整個 jQuery 不合理
  • 不符合關注點分離原則
  • 配置與調用方式混亂，而且基於事件的異步模型不友好

Fetch

  • 當接收到一個代表錯誤的HTTP狀態碼時，從 fetch() 返回的 Promise 不會 被標記為 reject（即使響應狀態是404 or 500），fetch會將這兩種狀態標記為 resolve（但是會將resolve返回的值設定為false），只有當 網路故障 or 請求被阻止 時，才會標記為reject
  • 默認情況下，fetch 不會從服務端發送或接收任何 cookies，如果站點依賴於用戶的 session，則會導致未經認證的請求（要發送cookies，必須設置credentials選項）
fetch('http://example.com/movies.json')
  .then(function(res){ //一樣有then
    console.log(res)
  })
  .catch(function(error){
    console.log(error)
  })

fetch 參數

// fetch 可以接受第二個可選參數，一個可以控制不同配置的init物件
postFunc('http://example.com/movies.json',{ans:52})
  .then(function(res){ //一樣有then
    console.log(res)
  })
  .catch(function(error){
    console.log(error)
  })
function postFunc(url,data){
  return fetch(url,{
    body:JSON.stringify(data),
    cache: 'no-cache', // *default, no-cache, reload, force-cache, only-if-cached
    credentials: 'same-origin', // include, same-origin, *omit
    header:{
      'user-agent':'Mozilla/4.0 MDN Exam',
      'content-type':'application/json'
    },
    method:'POST', // GET/POST/PUT/DELETE
    mode: 'cors', // no-cors, cors, * same-origin
    redirect: 'follow', // manual, *follow, error
    referrer: 'no-referrer' // *client, no-referrer
  })
  .then(res => res.json())
}

fetch 優點

  • 語法簡潔，更加語意化
  • 基於標準Promise實現，支持async / await
  • 更加底層，提供API豐富
  • 脫離XHR，並且是ES規範的實現方式。 並且fetch在前端的應用上有一項強於XHR的能力：跨域處理

Axios

Axios 本質上是對XHR的封裝，只不過他是 Promise 的實現版本，可以用在瀏覽器和 node.js 中，符合最新的 ES 規範

// 為ID的user創建請求,Demo1
axios.get('/user?ID=12345') // 也可將get 改為 post
  .then(function(res){
      console.log(res)
  }).catch(function(err){
      console.log(err)
  })
// 為ID的user創建請求,Demo2  
axios.get('/user',{  // 也可將get 改為 post
    params:{
      ID:12345
    }
  }).then(function(res){
    console.log(res)
  }).catch(function(err){
    console.log(err)
  })

Axios 併發請求

function getUserAcoount(){
  return axios.get('/user/12345')
}
function getUsePromise(){
  return axios.get('/user/12345/permission')
}
// 如同 Promise使用All，然後也是傳入陣列
axios.all([getUserAcoount(),getUsePromise()])
  .then(axios.spread(function(acct,perms){
    console.log(acct)
}))

Axios 優點

  • 從瀏覽器創建XMLHttpRequests
  • 從node.js 創建 http請求
  • 支持 Promise API
  • 攔截請求和響應
  • 轉換請求數據和響應數據
  • 取消請求
  • 自動轉換JSON數據
  • 客戶端支持防禦 XSRF（原理是將你的每個請求都帶一個從Cookie拿到的key，並且根據同源政策，假冒的網站無法拿到你cookie的key，因此後台即可判斷）

參考資料