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，因此后台即可判断）

参考资料