一篇文章让你学会如何选择 JS HTTP 请求库

摘要：本文将带你了解不同请求的原理，以及如何为项目选择合适的请求库。小程序年微信小程序上线，随后各大平台都推出自己的小程序。下面为目前较火的请求库。支持微信小程序和浏览器是一个基于的请求库，可以用在微信小程序和浏览器中，对上述平台都做了兼容。

以前前端提到网络请求通常是指浏览器，但现在随着 Node.js、小程序的出现，网络请求不再局限于浏览器。本文将带你了解不同请求的原理，以及如何为项目选择合适的请求库。

浏览器通过 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))

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

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

React Native 是 Facebook 2015 开源跨平台移动应用开发工具。

React Native 中已经内置了 XMLHttpRequest API，同时提供了和 web 标准一致的Fetch API，所以大部分在 web 端可以使用的网络请求库在 React Native 中也可以使用。

Weex 是 阿里 2016 开源跨平台移动应用开发工具。

Weex 通过封装模块来调用原生功能，提供了 stream 模块来实现网络请求。

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"});
  }
});

从上文可以看出，平台间的请求方式存在各种差异，请求库就是为解决这种差异。下面为目前较火的请求库。

$.ajax 为 jQuery 对 XMLHttpRequest 对象进行兼容封装。

需要补充的是 React Native 可以使用部分浏览器网络请求库，但是不能使用 jQuery，因为 jQuery 中还使用了很多浏览器中才有而 React Native 中没有的东西。

此外，现在使用框架的项目中我们通常采用其他请求库，或者自己根据项目对 XMLHttpRequest 或 Fetch 进行封装，不会为了网络请求引入 jQuery。

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.
});

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));
  });

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。

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。

不同请求库之间的 API、使用都会存在区别。项目开始时，根据需要兼容的平台选择合适的请求库，会大大减少以后代码重构的麻烦。

本文首发于公众号，更多内容欢迎关注我的公众号： 阿夸漫谈