异步操作的优点:请求耗时,因为js会等到请求加载完再执行代码,所以会出现在加载请求的时候,页面出现空白的情况
回调地狱:请求里边再掉请求,并需要多次回调
settimeout模拟Promise解决方案(链式编程)
new Promise((resolve,reject)=>{
setTimeout(() => {
resolve()
}, 1000);
}).then(()=>{
console.log('hello world');
return new Promise((resolve,reject)=>{
setTimeout(() => {
resolve()
}, 1000);
})
}).then(()=>{
console.log('hello vuejs');
return new Promise((resolve,reject)=>{
setTimeout(() => {
resolve()
}, 1000);
})
}).then(()=>{
console.log('final');
})
调用resolve()函数相当于调用then里边的函数
调用接口的返回值可以在resolve()函数中添加参数,在then函数里的参数的参数定义接收
更多细节:浅谈promise解决回调地狱
链式调用的最简便写法##
···
new Promise((resolve,reject)=>{
setTimeout(()=>{
resolve(1);
},1000);
}).then(n=>{
console.info(++n);
return n
}).then((n)=>{
console.info(++n);
}).catch(()=>{
console.log('err message')
})
···
return n 是 return Promise.resolve(n)的简写 返回的n会自动封装近Promise中
return Promise.resolve(n) 又是 return new Promise(()=>{})的简写
Promise 实现多接口完成时,继续执行代码的操作
···
Promise.all([
new Promise((resolve,reject)=>{
setTimeout(() => {
resolve({name:'张三'});
}, 1000);
}),
new Promise((resolve,reject)=>{
setTimeout(() => {
resolve({name:'李四'});
}, 2000);
})
]).then((result)=>{
console.log(result);
})
···