摘要：本文將帶你了解不同請(qǐng)求的原理，以及如何為項(xiàng)目選擇合適的請(qǐng)求庫。小程序年微信小程序上線，隨后各大平臺(tái)都推出自己的小程序。下面為目前較火的請(qǐng)求庫。支持微信小程序和瀏覽器是一個(gè)基于的請(qǐng)求庫，可以用在微信小程序和瀏覽器中，對(duì)上述平臺(tái)都做了兼容。

以前前端提到網(wǎng)絡(luò)請(qǐng)求通常是指瀏覽器，但現(xiàn)在隨著 Node.js、小程序的出現(xiàn)，網(wǎng)絡(luò)請(qǐng)求不再局限于瀏覽器。本文將帶你了解不同請(qǐng)求的原理，以及如何為項(xiàng)目選擇合適的請(qǐng)求庫。

瀏覽器通過 XMLHttpRequest 對(duì)象實(shí)現(xiàn) http 請(qǐng)求。

遠(yuǎn)古時(shí)代 ie6 是借助 ActiveXObject 對(duì)象實(shí)現(xiàn) http 請(qǐng)求，目前已無人使用，不考慮兼容。

W3C 標(biāo)準(zhǔn)新提出的 Fecth API，基于 Promise 實(shí)現(xiàn)，相對(duì) XMLHttpRequest 對(duì)象調(diào)用更方便，但舊瀏覽器不支持 Promise，需要對(duì) Promise 進(jìn)行 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))

Node.js 發(fā)布于 2009 年，是一個(gè)基于 Chrome V8 引擎的 JavaScript 運(yùn)行環(huán)境，Node.js 的頂層對(duì)象是 global，不存在 window 對(duì)象，不能通過 XMLHttpRequest 對(duì)象實(shí)現(xiàn) http 請(qǐng)求。

Node.js 中通過引入 http/https/http2 模塊實(shí)現(xiàn) http 請(qǐng)求，下面為 http 模塊實(shí)現(xiàn)的例子：

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

");
});
server.listen(8000);

React Native 是 Facebook 2015 開源跨平臺(tái)移動(dòng)應(yīng)用開發(fā)工具。

React Native 中已經(jīng)內(nèi)置了 XMLHttpRequest API，同時(shí)提供了和 web 標(biāo)準(zhǔn)一致的Fetch API，所以大部分在 web 端可以使用的網(wǎng)絡(luò)請(qǐng)求庫在 React Native 中也可以使用。

Weex 是 阿里 2016 開源跨平臺(tái)移動(dòng)應(yīng)用開發(fā)工具。

Weex 通過封裝模塊來調(diào)用原生功能，提供了 stream 模塊來實(shí)現(xiàn)網(wǎng)絡(luò)請(qǐng)求。

2017 年微信小程序上線，隨后各大平臺(tái)都推出自己的小程序。

小程序由于要對(duì) http 請(qǐng)求做參數(shù)校驗(yàn)、兼容各平臺(tái)（iOS、Android）或版本問題，所以提供了一套屬于自己的 API，不提供 window 對(duì)象。

下面為微信小程序和支付寶小程序的官網(wǎng)示例：

微信小程序

wx.request({
  url: "test.php", // 僅為示例，并非真實(shí)的接口地址
  data: {
    x: "",
    y: ""
  },
  header: {
    "content-type": "application/json" // 默認(rèn)值
  },
  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"});
  }
});

從上文可以看出，平臺(tái)間的請(qǐng)求方式存在各種差異，請(qǐng)求庫就是為解決這種差異。下面為目前較火的請(qǐng)求庫。

$.ajax 為 jQuery 對(duì) XMLHttpRequest 對(duì)象進(jìn)行兼容封裝。

需要補(bǔ)充的是 React Native 可以使用部分瀏覽器網(wǎng)絡(luò)請(qǐng)求庫，但是不能使用 jQuery，因?yàn)?jQuery 中還使用了很多瀏覽器中才有而 React Native 中沒有的東西。

此外，現(xiàn)在使用框架的項(xiàng)目中我們通常采用其他請(qǐng)求庫，或者自己根據(jù)項(xiàng)目對(duì) XMLHttpRequest 或 Fetch 進(jìn)行封裝，不會(huì)為了網(wǎng)絡(luò)請(qǐng)求引入 jQuery。

Request 是對(duì) 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.
});

SuperAgent 和 Request 類似，都是對(duì) 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));
  });

Axios 是一個(gè)基于 promise 的 HTTP 請(qǐng)求庫，可以用在瀏覽器和 Node.js 中。瀏覽器中使用 XMLHttpRequest，Node.js 中使用 http/https 模塊。下面為請(qǐng)求示例：

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

Vue 2.0 推薦使用 Axios 作為 Vue 的請(qǐng)求庫。而且在 SSR 的時(shí)候我們?cè)诜?wù)端、客戶端都需要請(qǐng)求，所以通常會(huì)選擇 Axios。

Fly.js 是一個(gè)基于 promise 的 HTTP 請(qǐng)求庫，可以用在Node.js 、微信小程序 、Weex 、React Native 、Quick App 和瀏覽器中，對(duì)上述平臺(tái)都做了兼容。

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

除了 Fly.js，有些小程序開發(fā)框架本身提供網(wǎng)絡(luò)請(qǐng)求庫，對(duì)平臺(tái)做了兼容，比如 Taro.request。

不同請(qǐng)求庫之間的 API、使用都會(huì)存在區(qū)別。項(xiàng)目開始時(shí)，根據(jù)需要兼容的平臺(tái)選擇合適的請(qǐng)求庫，會(huì)大大減少以后代碼重構(gòu)的麻煩。

本文首發(fā)于公眾號(hào)，更多內(nèi)容歡迎關(guān)注我的公眾號(hào)： 阿夸漫談