封装异步操作
Promise.all([]).then()
/*
Promise-----承诺----消除异步操作(用同步一样的方式来书写异步的代码)
//ajax必须工作在localhost下
异步代码
resolve 成功了
reject 失败了
下面用jquery的ajax做练习
当有多个的时候用Promise.all([]).then(function({},function(){})
jquery高版本3.2.1的,本身自带Promise
$.ajax({
url: 'data/arr.txt',
dataType: 'json'
})
这个ajax有一个返回值,就是Promise对象
let P0 = $.ajax({
url: 'data/arr.txt',
dataType: 'json'
})
console.log(P0)//有Promise对象
Promise的完美写法与jquery高版本结合
Promise.all([
$.ajax(),
$.ajax()
]).then(results=>{
//对了
},err=>{
//错了
})
Promise其他的方法
Promise.all([])//全都要成功
Promise.race([])//哪个先读到先用哪个
*/
/*
let P = new Promise(function(resolve,reject){
$.ajax({
url: 'data/arr.txt',
dataType: 'json',
success(arr){
resolve(arr)
},
error(err){
reject(err);
}
})
})
let P1 = new Promise(function(resolve,reject){
$.ajax({
url: 'data/arr.txt',
dataType: 'json',
success(arr){
resolve(arr)
},
error(err){
reject(err);
}
})
})
P.then(function(arr){//resolve
console.log('成功'+arr)
},function(err){//reject
//console.log('失败');
console.log(err)
})
*/
//进一步简化
function createPromise(url){
return new Promise(function(resolve,reject){
$.ajax({
url,//当key和value一样时,可以省略value
dataType: 'json',
success(arr){
resolve(arr)
},
error(err){
reject(err);
}
})
})
}
/*
Promise.all([
P,P1
]).then(function(arr){
console.log('全都成功了')
console.log(arr)//装了两个结果,一个是数组,一个是json
let [res1,res2] = arr;//解构赋值
},function(){
console.log('至少有一个失败了')
})
*/
Promise.all([
createPromise('data/arr.txt'),
createPromise('data/json.txt')
]).then(function(arr){
//console.log('全都成功了')
//console.log(arr)//装了两个结果,一个是数组,一个是json
let [res1,res2] = arr;//解构赋值
},function(){
//console.log('至少有一个失败了')
})
//高版本jquery自带Promise对象
let P0 = $.ajax({
url: 'data/arr.txt',
dataType: 'json'
})
console.log(P0)//有Promise对象
//Promise的完美写法
Promise.all([
$.ajax({url: "data/arr.txt",dataType: 'json'}),
$.ajax({url: 'data/json.txt',dataType: 'json'})
]).then(function(results){
let [arr,json] = results;
console.log(arr,json)
console.log('成功了')
},function(){
console.log('失败了')
})