javascript 的网络请求多种方式

541 阅读1分钟

jquery 网络请求的回调执行

我们经常遇到某些耗时很长的javascript操作。其中,既有异步的操作(比如ajax读取服务器数据),也有同步的操作(比如遍历一个大型数组),它们都不是立即能得到结果的。

通常的做法是,为它们指定回调函数(callback)。即事先规定,一旦它们运行结束,应该调用哪些函数,类似代码如下:

var params = {
			"code": "086"
		};
		$.ajax({
			type: "get",
			url: 'https://www.bus365.com/parameters/0',
			async: true,
			dataType: "json",
			data: params,
			success: function (data) {

				console.log(data);

			},
			fail: function (res) {

			}

		});

jquery 网络请求的链式写法

在回调函数方面,jQuery的功能非常弱。为了改变这一点,jQuery开发团队就设计了deferred对象。

简单说,deferred对象就是jQuery的回调函数解决方案。在英语中,defer的意思是"延迟",所以deferred对象的含义就是"延迟"到未来某个点再执行。写法如下:

var params = {
			"code": "086"
		};
$.ajax({
			type: "get",
			url: 'https://www.bus365.com/parameters/0',
			async: true,
			dataType: "json",
			data: params

		}).done(function (data) {
			console.log(data);

		}).fail(function (res) {
			console.log(res);

		});

jquery 高版本网络请求的Promise写法

var params = {
			"code": "086"
		};
		Promise.all([
			$.ajax({
				type: "get",
				data: params,
				url: 'https://www.bus365.com/parameters/0',
				dataType: 'json'
			})
		]).then(function (data) {
			console.log(data);

		}, function () {
			console.log('失败');
		});

axios网络请求的写法

	var params = {
			"code": "086"
		};
		axios.get('https://www.bus365.com/parameters/0', {
			params: params
		})
			.then(function (response) {
				console.log(response.data);
			})
			.catch(function (error) {
				console.log(error);
			});

fly.js网络请求的写法

	var params = {
			"code": "086"
		};
		fly.get('https://www.bus365.com/parameters/0', params)
			.then(function (response) {
				console.log(response);
			})
			.catch(function (error) {
				console.log(error);
			});

参考资料

jQuery的deferred对象详解

axios中文文档|axios中文网

Fly.js