Promise is a solution for asynchronous programming; (personal understanding: for example, a requirement requires two requests to return the result before it can be processed, then it is very convenient to use Promise)
We can use setTimeout to simulate network requests
setTimeout(()=>{
console.log("使用setTimeout来模拟网络请求");
},1000)Meaning: callback the arrow function after 1 second, and execute the content of the arrow function;
Promise detailed introduction:
Promise is equivalent to a class, which needs to be initialized to an object when called; the parameter of the object is a function, usually an arrow function, and the parameters in the function are also functions, usually resolve and reject functions; the resolve function is The function called when the request is successful, reject is the function to be processed when the request fails; the function called by resolve needs to be processed with the then callback function, and the function called by reject needs to be processed with the catch function;
simple example
new Promise((resolve,reject)=>{
setTimeout((data)=>{
//console.log("success"); 调用成功，但是不在这个地方进行处理
resolve('promise');
reject('error message');
},10000)
}).then((data)=>{
console.log(data); //调用成功，通过resolve函数在这个地方进行处理
}).catch((err)=>{
console.log(err); //调用失败，通过reject函数在这个地方进行处理
})Promise is chain programming, a simple example
new Promise((resolve,reject)=>{
setTimeout(()=>{
resolve
},1000)
}).then(()=>{
console.log('处理第一层返回的结果');
return new Promise((resolve,reject)=>{
setTimeout(()=>{
resolve
},1000)
})
}).then(()=>{
console.log(‘处理第二层返回的结果’)
return new Promise()......
})Note: At this time, it must be noted that the callback functions processed are at the same level; under
what circumstances will Promise be used? Under normal circumstances, when there is an asynchronous operation, use Promise to encapsulate this asynchronous operation;
//new -> constructor (1. Save some state information 2. Execute the passed parameters)
// Perform the passed callback function When, two parameters will be passed in, resolve and reject. It is itself
the three states of the function Promise:
there will be three states after asynchronous operation:
pending: waiting state, such as stopping the network request, or the timer has not expired;
fulfill: fulfilling state, when we actively call back to resolve, It is in this state and will be called back. Then()
reject: Rejected state, when we actively call back reject, we are in this state, and we will call back. Catch()
Simple method instance using Promise:
new Promise((resolve,reject)=>{
setTimeout(()=>{
resolve('aaa')
},1000)
}).then((res)=>{
//自己处理的代码
console.log(res,'第一层的处理代码')
//对结果进行处理的代码
return Promise.resolve(res+'111')
//或者是
return res+'111';
//return Promise.reject('error message')
//throw 'error message'
}).then((res)=>{
console.log(res,'第二层的处理代码')
//对结果进行处理的代码
return Promise.resolve(res+'222')
//或者是
return res+'222';
}).catch((err)=>{
console.log(err);
})异步请求的封装
在没有使用promise时：
let isResult1 = false;
let isResult2 = false;
$ajax({
url:'url1',
success:function(){
console.log('结果1')
isResult1 = true
handleResult()
}
})
$ajax({
url:'url2',
success:function(){
console.log('结果2')
isResult2 = true
handleResult()
}
})
function handleResult(){
if(isResult1 && isResult2){
//开始处理请求
}
}
当我们使用了Promise后
Promise.all([
new Promise((resolve,reject)=>{
$ajax({
url:'url1',
success:function(){
console.log('结果1')
isResult1 = true
handleResult()
}
})
})
new Promise((resolve,reject)=>{
$ajax({
url:'url2',
success:function(){
console.log('结果2')
isResult2 = true
handleResult()
}
})
})
]).then((results)=>{
result[0] //就是ajax1请求处理的结果
result[1] //就是ajax2请求处理的结果
})
简单实例：
Promise.all([
new Promise((resolve,reject)=>{
setTimeout(()=>{
resolve({name:'why',age:18})
},2000)
})
new Promise((resolve,reject)=>{
setTimeout(()=>{
resolve({name:'kobe',age:41});
},1000)
})
]).then(results=>{
console.log(results)
})