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'});  }});
  1. 申请库

从上文能够看出，平台间的申请形式存在各种差别，申请库就是为解决这种差别。上面为目前较火的申请库。

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('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。

  1. 总结

不同申请库之间的 API、应用都会存在区别。我的项目开始时，依据须要兼容的平台抉择适合的申请库，会大大减少当前代码重构的麻烦。

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