一篇文章讓你學會如何選擇 JS HTTP 請求庫

之前前端提到網絡請求一般是指瀏覽器，但如今隨着 Node.js、小程序的出現，網絡請求再也不侷限於瀏覽器。本文將帶你瞭解不一樣請求的原理，以及如何爲項目選擇合適的請求庫。

1. 請求原理

1.1 瀏覽器

瀏覽器經過 XMLHttpRequest 對象實現 http 請求。

遠古時代 ie6 是藉助 ActiveXObject 對象實現 http 請求，目前已無人使用，不考慮兼容。

W3C 標準新提出的 Fecth API，基於 Promise 實現，相對 XMLHttpRequest 對象調用更方便，但舊瀏覽器不支持 Promise，須要對 Promise 進行 pollyfill。

• XMLHttpRequest

let xhr = new XMLHttpRequest();
xhr.open('get', url, true); 
xhr.send();
xhr.onreadystatechange = function() {
    if(xhr.readyState === 4 && xhr.status === 200 ) {
        let response = JSON.parse(xhr.responseText);
    }
}

• Fetch

fetch(url)
    .then(response => response.json())
    .then(data => console.log(data))
    .catch(e => console.log("error", e))

1.2 Node.js

Node.js 發佈於 2009 年，是一個基於 Chrome V8 引擎的 JavaScript 運行環境，Node.js 的頂層對象是 global，不存在 window 對象，不能經過 XMLHttpRequest 對象實現 http 請求。

Node.js 中經過引入 http/https/http2 模塊實現 http 請求，下面爲 http 模塊實現的例子：

const http = require('http');

const server = http.createServer((req, res) => {
  res.end('hello world');
});
server.on('clientError', (err, socket) => {
  socket.end('HTTP/1.1 400 Bad Request\r\n\r\n');
});
server.listen(8000);

1.3 React Native

React Native 是 Facebook 2015 開源跨平臺移動應用開發工具。

React Native 中已經內置了 XMLHttpRequest API，同時提供了和 web 標準一致的Fetch API，因此大部分在 web 端可使用的網絡請求庫在 React Native 中也可使用。

1.4 Weex

Weex 是 阿里 2016 開源跨平臺移動應用開發工具。

Weex 經過封裝模塊來調用原生功能，提供了 stream 模塊來實現網絡請求。

1.5 小程序

2017 年微信小程序上線，隨後各大平臺都推出本身的小程序。

小程序因爲要對 http 請求作參數校驗、兼容各平臺（iOS、Android）或版本問題，因此提供了一套屬於本身的 API，不提供 window 對象。

下面爲微信小程序和支付寶小程序的官網示例：

• 微信小程序

wx.request({
  url: 'test.php', // 僅爲示例，並不是真實的接口地址
  data: {
    x: '',
    y: ''
  },
  header: {
    'content-type': 'application/json' // 默認值
  },
  success(res) {
    console.log(res.data)
  }
})

• 支付寶小程序

my.httpRequest({
  url: 'http://httpbin.org/post',
  method: 'POST',
  data: {
    from: '支付寶',
    production: 'AlipayJSAPI',
  },
  dataType: 'json',
  success: function(res) {
    my.alert({content: 'success'});
  },
  fail: function(res) {
    my.alert({content: 'fail'});
  },
  complete: function(res) {
    my.hideLoading();
    my.alert({content: 'complete'});
  }
});

2. 請求庫

從上文能夠看出，平臺間的請求方式存在各類差別，請求庫就是爲解決這種差別。下面爲目前較火的請求庫。

2.1 $.ajax（支持瀏覽器）

$.ajax 爲 jQuery 對 XMLHttpRequest 對象進行兼容封裝。

須要補充的是 React Native 可使用部分瀏覽器網絡請求庫，可是不能使用 jQuery，由於 jQuery 中還使用了不少瀏覽器中才有而 React Native 中沒有的東西。

此外，如今使用框架的項目中咱們一般採用其餘請求庫，或者本身根據項目對 XMLHttpRequest 或 Fetch 進行封裝，不會爲了網絡請求引入 jQuery。

2.2 Request（支持 Node.js）

Request 是對 Node.js 的 http/https 模塊封裝的 http 庫。

var request = require('request');
request('http://www.google.com', function (error, response, body) {
  console.log('error:', error); // Print the error if one occurred
  console.log('statusCode:', response && response.statusCode); // Print the response status code if a response was received
  console.log('body:', body); // Print the HTML for the Google homepage.
});

2.3 SuperAgent（支持 Node.js）

SuperAgent 和 Request 相似，都是對 Node.js 的 http/https 模塊封裝的 http 庫。

var request = require('superagent')
request
  .post('/api/pet')
  .send({ name: 'Manny', species: 'cat' })
  .set('X-API-Key', 'foobar')
  .set('Accept', 'application/json')
  .then(res => {
     alert('yay got ' + JSON.stringify(res.body));
  });

2.4 Axios（支持 React Native，Node，瀏覽器）

Axios 是一個基於 promise 的 HTTP 請求庫，能夠用在瀏覽器和 Node.js 中。瀏覽器中使用 XMLHttpRequest，Node.js 中使用 http/https 模塊。下面爲請求示例：

axios.get('/user?ID=12345')
  .then(function (response) {
    console.log(response);
  })
  .catch(function (error) {
    console.log(error);
  });

Vue 2.0 推薦使用 Axios 做爲 Vue 的請求庫。並且在 SSR 的時候咱們在服務端、客戶端都須要請求，因此一般會選擇 Axios。

2.5 Fly.js（支持 Node.js 、微信小程序 、Weex 、React Native 、Quick App 和瀏覽器）

Fly.js 是一個基於 promise 的 HTTP 請求庫，能夠用在Node.js 、微信小程序 、Weex 、React Native 、Quick App 和瀏覽器中，對上述平臺都作了兼容。

fly.get('/user?id=133')
  .then(function (response) {
    console.log(response);
  })
  .catch(function (error) {
    console.log(error);
  });

除了 Fly.js，有些小程序開發框架自己提供網絡請求庫，對平臺作了兼容，好比 Taro.request。

3. 總結

不一樣請求庫之間的 API、使用都會存在區別。項目開始時，根據須要兼容的平臺選擇合適的請求庫，會大大減小之後代碼重構的麻煩。

• 本文首發於公衆號，更多內容歡迎關注個人公衆號： 阿誇漫談