用于进行 AJAX 调用的顶级 JavaScript 库

2018-01-31 10:59:24来源:https://www.oschina.net/translate/top-javascript-libraries-f作者:开源中国翻译文章人点击

分享

AJAX 是一组网页开发技术,被客户端框架和客户用来向服务端发起异步 HTTP 调用。AJAX 代表的就是异步 JavaScript 和 XML。AJAX 曾是网页开发业界的一个常见术语,许多流行的 JavaScript 小组件都是用 AJAX 构建的。例如,一次特定的用户交互,比如按下按钮的动作,它会向服务端发起一次异步调用,然后服务器会获取到数据并将数据返回给客户端——所有这些都不会重新加载网页。


对 AJAX 的一个现代的重新诠释

JavaScript 日新月异,到了今天,我们有了使用前端库和/或框架,像是 React, Angular, Vue, 等等这些构建而来的动态网站。AJAX 的概念也发生了重大变化,因为现代的异步 JavaScript 调用使用的是 JSON 而非 XML。现在市面上充斥这各种库,它们都能让你从客户端应用程序向你的服务端发起异步调用。它们中的一些对浏览器标准的实现都有各自的办法,其中又有一小部分因为灵活易用而拥有了庞大的用户群。它们之中有些使用 Promise ,有写则使用回调。在本文中,我会讲到 5 种用来从服务端获取数据的 AJAX 库。



Fetch API

Fetch API 是 XMLHttpRequest 的现代替代方法,用于从服务器检索资源。 与 XMLHttpRequest 不同,它具有更强大的功能集和更有意义的方法名。 由于其语法和结构,Fetch 也更灵活且易于使用。 但是,与其他 AJAX HTTP 库不同的是,它被所有现代 Web 浏览器所支持。Fetch 遵循 request-response 方法,Fetch 提出请求并返回一个解析为 Response 对象的 promise 。


你可以传递一个 Request 对象来获取,或者,也可以仅传递要获取的资源的 URL 。 下面的示例演示了使用 Fetch 创建的简单 GET 请求。


fetch('https://www.example.com', {
method: 'get'
})
.then(response => response.json())
.then(jsonData => console.log(jsonData))
.catch(err => {
//error block
}

正如你所看到的,Fetch 的 then 方法返回一个响应对象,你可以使用一系列的 thens 进行进一步操作。 我已经使用 .json() 方法将响应结果转换为 JSON 并将其打印到控制台。



如果你需要 POST 表单数据或使用 Fetch 创建AJAX 文件上传
? 除了 Fetch 之外,你还需要一个输入表单,并使用 FormData 库来存储表单对象。


var input = document.querySelector('input[type="file"]')
var data = new FormData()
data.append('file', input.files[0])
data.append('user', 'blizzerand')
fetch('/avatars', {
method: 'POST',
body: data
})


你可以在官方的 Mozilla web 文档
中阅读更多关于 Fetch API 的信息。



Axios


Axios
是一个基于 XMLHttpRequest 构建的现代 JavaScript 库,用于进行 AJAX 调用。 它允许你从浏览器和服务器发出 HTTP 请求。 此外,它还支持 ES6 原生的 Promise API 。 Axios 的其他突出特点包括:


拦截请求和响应。



使用 promise 来转换请求和响应数据。



自动转换 JSON 数据。



取消实时请求。


要使用 Axios ,你需要先安装它。


npm install axios

这是一个使用 Axios 的基本例子。


// Make a request for a user with a given ID
axios.get('/user?ID=12345')
.then(function (response) {
console.log(response);
})
.catch(function (error) {
console.log(error);
});

与 Fetch 相比,Axios 的语法更简单。 我们可以做一些更复杂的事情,比如我们之前使用 Fetch 创建的 AJAX 文件上传。


var data = new FormData();
data.append('foo', 'bar');
data.append('file', document.getElementById('file').files[0]);
var config = {
onUploadProgress: function(progressEvent) {
var percentCompleted = Math.round( (progressEvent.loaded * 100) / progressEvent.total );
}
};
axios.put('/upload/server', data, config)
.then(function (res) {
output.className = 'container';
output.innerHTML = res.data;
})
.catch(function (err) {
output.className = 'container text-danger';
output.innerHTML = err.message;
});

Axios 更具有可读性。 Axios 也受到 React 和 Vue 等现代库的追捧。



jQuery

jQuery 曾经是 JavaScript 的一线类库,涵盖从 AJAX 调用到操作 DOM 的内容。尽管在其他前端库的出现后它的相关性部分地减少了,你仍然可以使用 JQuery 进行异步调用。


如果你以前使用过 jQuery,那么这(jQuery)可能是最简单的解决方案了。然而,你必须使用 $.ajax 方法导入整个 JQuery 类库。尽管这类库有区域特异性的(domain-specific)方法,如 $.getJSON,$.get,和$.post,但语法并不像其他的 AJAX 库那样简单。这是基本的 GET 请求的代码。


$.ajax({
url: '/users',
type: "GET",
dataType: "json",
success: function (data) {
console.log(data);
}
fail: function () {
console.log("Encountered an error")
}
});

jQuery 好的方面是如果你在存在疑惑你可以找到很多的支持和文档。我找到许多 jQuery 的使用 FormData() 的 AJAX 文件上传的例子。这是最简单的方法:


var formData = new FormData();
formData.append('file', $('#file')[0].files[0]);
$.ajax({
url : 'upload.php',
type : 'POST',
data : formData,
processData: false,// tell jQuery not to process the data
contentType: false,// tell jQuery not to set contentType
success : function(data) {
console.log(data);
alert(data);
}
});

SuperAgent

SuperAgent 是一个轻量级和渐进式 AJAX 库,更侧重于可读性和灵活性。 SuperAgent 还拥有一个温和的学习曲线,不像其他前端库陡峭难以学习。 它有一个与 Node.js 相同的 API 模块。SuperAgent 有一个请求对象,它接受 GET,POST,PUT,DELETE 和 HEAD 等方法。你可以调用 .then(),.end()或新的 .await()方法来处理响应。 例如,以下是 SuperAgent 的简单 GET 请求。


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

如果你想要做更多的事情,比如使用这个 AJAX 库上传文件? 这太容易了。


request
.post('/upload')
.field('user[name]', 'Tobi')
.field('user[email]', 'tobi@learnboost.com')
.field('friends[]', ['loki', 'jane'])
.attach('image', 'path/to/tobi.png')
.then(callback);


如果有兴趣了解更多关于 SuperAgent 的信息
,那里有一套很好的文档来帮助开始学习。



Request - 一个简单的 HTTP 客户端


这个Request 库
是进行 HTTP 调用最简单的方法之一。它的结构和语法非常类似于 Node.js 中请求的处理方式。目前,这项目在 GitHub 获得了 18 K的stars,并且值得一提的是,它是一个广受欢迎的 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.
});

结论

十年前,从客户端进行 HTTP 调用并非易事。前端开发者必须依赖于难以使用和实现的 XMLHttpRequest 。现代的库和 HTTP 客户端使得前端功能如用户交互、动画、异步文件上传等更容易。


我个人喜欢的是 Axios ,因为就我个人而言感觉它更具可读性和友好(easy on the eyes)。你也可以使用 Fetch ,因为它有良好的文档记录和标准化的解决方案。


你最喜欢的 AJAX 库是什么?在下面分享你的想法吧!



最新文章

123

最新摄影

闪念基因

微信扫一扫

第七城市微信公众平台