异步和同步
异步,操作之间没有关系,同时执行多个操作, 代码复杂。
同步,同时只能做一件事,代码简单。
Promise 对象
用同步的方式来书写异步代码。
Promise 让异步操作写起来,像在写同步操作的流程,不必一层层地嵌套回调函数。
改善了可读性,对于多层嵌套的回调函数很方便。
充当异步操作与回调函数之间的中介,使得异步操作具备同步操作的接口。
Promise 也是一个构造函数
接受一个回调函数f1作为参数,f1里面是异步操作的代码。
返回的p1就是一个 Promise 实例。
所有异步任务都返回一个 Promise 实例。
Promise 实例有一个then方法,用来指定下一步的回调函数。
function f1(resolve, reject) {
// 异步代码...
}
var p1 = new Promise(f1);
p1.then(f2); // f1的异步操作执行完成,就会执行f2。
Promise 使得异步流程可以写成同步流程
// 传统写法
step1(function (value1) {
step2(value1, function(value2) {
step3(value2, function(value3) {
step4(value3, function(value4) {
// ...
});
});
});
});
// Promise 的写法
(new Promise(step1))
.then(step2)
.then(step3)
.then(step4);
let p=new Promise(function (resolve, reject) {
//异步代码
//resolve成功。reject失败
$.ajax({
url: 'data/arr',
dataType: 'json',
success(arr){
resolve(arr);
},
error(err){
reject(err);
}
})
});
p.then(function (arr) {
alert('成功'+arr);
},function (err) {
console.log(err);
alert('失败'+err);
});
let p1=new Promise(function (resolve, reject) {
$.ajax({
url: 'data/arr',
dataType: 'json',
success(arr){
resolve(arr);
},
error(err){
reject(err);
}
})
});
let p2=new Promise(function (resolve, reject) {
$.ajax({
url: 'data/json',
dataType: 'json',
success(arr){
resolve(arr);
},
error(err){
reject(err);
}
})
});
Promise.all([
p1,p2
]).then(function (arr) {
let [res1,res2]=arr;
alert('全都成功了');
alert(res1);
alert(res2);
},function () {
alert('至少有一个失败了');
});
function createPromise(url){
return new Promise(function (resolve, reject) {
$.ajax({
url,
dataType: 'json',
success(arr){
resolve(arr);
},
error(err){
reject(err);
}
})
});
}
Promise.all([
createPromise('data/arr'),
createPromise('data/json')
]).then(function (arr) {
let [res1,res2]=arr;
alert('全都成功了');
alert(res1);
alert(res2);
},function () {
alert('至少有一个失败了');
});
Promise.all([
$.ajax({url:'data/arr', dataType: 'json'}),
$.ajax({url:'data/json', dataType: 'json'})
]).then(function (results) {
let [arr,json]=results;
alert('成功了');
console.log(arr,json);
},function () {
alert('失败了');
});
Promise.all([
$.ajax({url:'data/arr', dataType: 'json'}),
$.ajax({url:'data/json', dataType: 'json'}),
$.ajax({url:'data/num', dataType: 'json'})
]).then(results=>{
let [arr,json,num]=results;
alert('成功了');
console.log(arr,json,num);
},err=>{
alert('失败了');
});
Promise.all(promiseArray)方法: 都成功才算成功
将多个Promise对象实例包装,生成并返回一个新的Promise实例。
promise数组中所有的promise实例都变为resolve的时候,该方法才会返回。
并将所有结果传递results数组中。
promise数组中任何一个promise为reject的话,则整个Promise.all调用会立即终止,并返回一个reject的新的promise对象。
var p1 = Promise.resolve(1),
p2 = Promise.resolve(2),
p3 = Promise.resolve(3);
Promise.all([p1, p2, p3]).then(function (results) {
console.log(results); //[1, 2, 3]
});
Promise.race([p1, p2, p3])方法:有一个成功就算成功
Promse.race就是赛跑的意思
哪个结果获得的快,就返回那个结果
不管结果本身是成功状态还是失败状态