小题莫の博客

异步操作--互不干扰，各执行各的（多个操作可以一起进行）

回调套回调

$.ajax({
  url: 'data/1.json',
  dataType: 'json',
  success(data1){
	$.ajax({
	  url: 'data/2.json',
	  dataType: 'json',
	  success(data2){
		$.ajax({
		  url: 'data/3.json',
		  dataType: 'json',
		  success(data3){
			console.log(data1, data2, data3);
		  }
		});
	  }
	});
  }
});

这个时候Promise出现了

let p=new Promise(function (resolve, reject){
  $.ajax({
	url: 'data/1.json',
	dataType: 'json',
	success(data){
	  resolve(data);
	},
	error(res){
	  reject(res);
	}
  });
});

p.then(function (data){
  alert('成功');
  console.log(data);
}, function (res){
  alert('失败');
  console.log(res);
});

终极写法：--异步的操作，同步的写法

Promise.all([
  $.ajax({url: 'data/1.json', dataType: 'json'}),
  $.ajax({url: 'data/2.json', dataType: 'json'}),
  $.ajax({url: 'data/3.json', dataType: 'json'}),
]).then((arr)=>{
  let [data1, data2, data3]=arr;

  console.log(data1, data2, data3);
}, (res)=>{
  alert('错了');
});

也可以

Promise.all([
  $.ajax({url: 'data/1.json', dataType: 'json'}),
  $.ajax({url: 'data/2.json', dataType: 'json'}),
  $.ajax({url: 'data/3.json', dataType: 'json'}),
]).then(([data1, data2, data3])=>{
  console.log(data1, data2, data3);
}, (res)=>{
  alert('错了');
});