promise案例

请选择省份

<script src="js/tools.js"></script>
<script>
	// get 异步请求 url
	function promiseAjax(url) {
		return new Promise(function(resolve, reject){
			ajax({
				type : "get",
				url : url,
				dataType : "json",
				success : function(data){
					resolve(data);
				},
				error : function(err){
					reject(err);
				}
			});
		});
	}

	function loadProvince() {
		var _url1 = "http://route.showapi.com/1149-1?showapi_appid=29550&showapi_sign=1b9802a551774e3480cb844e18f0ceef&level=1",
			_url2 = "http://route.showapi.com/1149-1?showapi_appid=29550&showapi_sign=1b9802a551774e3480cb844e18f0ceef&level=1&page=2";

		/*
		// 利用Promise对象将异步嵌套转换为同步链式调用的方式
		var html = "";
		promiseAjax(_url1).then(function(data){
			console.log(data);
			data.showapi_res_body.data.forEach(function(province){
				html += `<option>${province.areaName}</option>`;
			});
			return promiseAjax(_url2);
		}).then(function(data){
			console.log(data)
			data.showapi_res_body.data.forEach(function(province){
				html += `<option>${province.areaName}</option>`;
			});
		}).then(function(){
			$("#province").innerHTML += html;
		});*/

		// Promise.all()
		// 当两页数据都加载完成后，执行成功的回调函数
		Promise.all([promiseAjax(_url1), promiseAjax(_url2)])
					 .then(function(array){
					 	var html = ""; // 存放HTML字符串
					 	// 第一页省份数据与第二页省份数据串联后遍历
					 	array[0].showapi_res_body.data
					 		.concat(array[1].showapi_res_body.data)
					 		.forEach(function(province){
					 			// 连接下拉列表中的列表项标签
								html += `<option>${province.areaName}</option>`;
							});
					 	// 显示所有省份
					 	$("#province").innerHTML += html;
					 	console.log(arguments);
					 });
	}

	loadProvince();
</script>