ajax
ajax('http://aaa.com/a/1.txt',function(){});
异步操作：同时进行多个操作，用户体验好，代码混乱
同步操作：一次只能执行一个操作，用户体验不好，但清晰
//异步——麻烦
ajax('http://aaa.com/api/uesr',function(data1){
ajax('http://aaa.com/api/item',function(data2){
ajax('http://aaa.com/api/test',function(data3){
},function(){
alert('error');
});
},function(){
alert('error');
});
},function(){
alert('error');
});
//同步——容易
let data1=ajax('http://aaa.com/api/uesr');
let data2=ajax('http://aaa.com/api/item');
let data3=ajax('http://aaa.com/api/test');
Promise
融合异步同步
封装的例子：
//需要jQuery
let p = new Promise(function(resolve, reject) {
//异步
//resolve 解决
//reject 拒绝
$.ajax({
url: 'data/1.txt',
dataType: 'json',
success(arr) {
resolve(arr);
},
error(res) {
reject(res);
}
})
})
p.then(function(arr) {
alert('成功');
console.log(arr);
}, function(res) {
alert('失败');
console.log(res);
});
jQuery的ajax本身就是promise，即：
//需要jQuery
$.ajax({
url: 'data/1.txt',
dataType: 'json'
}).then(arr => {
alert(arr);
}, res => {
alert('失败');
})
如果不止一个数据，即：
//需要jQuery
//只要有一个失败，就全算失败
//只有都成功，才算成功
Promise.all([
$.ajax({ url: 'data/1.txt', dataType: 'json' }),
$.ajax({ url: 'data/2.txt', dataType: 'json' }),
$.ajax({ url: 'data/3.txt', dataType: 'json' })
]).then(arr => {
alert(arr);
//解构
let [data1, data2, data3] = arr;
}, res => {
alert('失败');
});
//或者
Promise.all([
$.ajax({ url: 'data/1.txt', dataType: 'json' }),
$.ajax({ url: 'data/2.txt', dataType: 'json' }),
$.ajax({ url: 'data/3.txt', dataType: 'json' })
]).then(([data1, data2, data3]) => {
console.log(data1, data2, data3);
}, res => {
alert('失败');
});
Promise.race 或的意思，只有都失败才会走res
不是所有情况都可以用promise，举个栗子，普通用户普通广告，特殊用户特殊广告：
let userData = ajax('http://xxx.com/api/userdata');
if (userData.vip) {
let data2 = ajax('http://xxx.com/api/vipItem');
let data3 = ajax('http://xxx.com/api/vipAd');
} else {
let data2 = ajax('http://xxx.com/api/Item');
let data3 = ajax('http://xxx.com/api/Ad');
}
ajax('http://xxx.com/api/userdata').then(userData => {
if (userData.vip) {
let data2 = ajax('http://xxx.com/api/vipItem');
let data3 = ajax('http://xxx.com/api/vipAd');
} else {
let data2 = ajax('http://xxx.com/api/Item');
let data3 = ajax('http://xxx.com/api/Ad');
}
}, err => {
alert('error');
});
可以看到又回去了= =
这里引出async/await概念
async/await
简单来说，他是函数的一种特殊形式
async function show(){
xxx;
xxx;
let data=await $.ajax();
}
show();
普通函数：一直执行，直到结束
async函数：能“暂停”
举个栗子：
async function show(){
let a=10,b=5;
let data=await $.ajax({url:'data/1.txt',dataType:'json'});
alert(a+b+data[0]);
}
show();