async 与await 解决请求回调地狱(多层请求嵌套)
1.async(异步) 与 await(同步) 方法 解决请求回调地狱 是通过promise来实现的,所以使用这两个方法进行测试也是要模拟返回一个promise对象===手动返回。
*没有返回promise对象将无法实现异步同步
(错误写法)
function test1(){
setTimeout(()=>{
return 50;
},5000) //这里使用setTimeout来模拟 请求等待(请求1未完成)
}
async function test2(){
let num= await test1();
console.log(num);
}
test2();
//这里打印出的是undefined 因为test1 方法并没有满足要求(返回一个promise对象) 所以没有实现await(同步)的效果。而是不等test1执行直接就console.log()了
(正确写法)
function test1(){
return new Promise((resolve,reject)=>{ //成功信息由 resolve 抛出 错误信息由 reject抛出
setTimeout(()=>{
return 50;
},5000) //这里使用setTimeout来模拟 请求等待(请求1未完成)
})
}
async function test2(){
let num= await test1();
console.log(num);
}
test2();
//打印出50; 这里执行时,遇到await 就一直等待 test1执行完成,才继续执行。
注意:1. await 只能在async 函数内使用
2. 如果想获取async 函数内 return 的值 只能使用 方法().then(res=>{/res就是return 的值/})
多个依赖请求时的使用方法:
function getMessage(){
return axios.get('/xxx')
}
function getInfo(info){
return axios.post('/xxxxx',{ info})
}
//触发请求的方法
async function click(){
let status = await getMessage(); //因为axios 默认会返回一个promise对象 所以 status为此时getMessage()方法请求返回的 promise对象
if(status.code===200){
let status2=await getInfo(status.info);
if(status2.code===200){
//获取getInfo中的最终数据
let arr=status2.data;
}
}
}
//getMessage方法请求返回的数据
{
code:200 , //失败 204
info:'完成'
}
//getInfo 方法请求返回的数据
{
code:200,
data:[]
}
可以在 click方法内加上 try catch
async function click(){
try{
let status = await getMessage(); //因为axios 默认会返回一个promise对象 所以 status为此时getMessage()方法请求返回的 promise对象
if(status.code===200){
let status2=await getInfo(status.info);
if(status2.code===200){
//获取getInfo中的最终数据
let arr=status2.data;
}
}
}catch(err){
console.log(err);
}
}