業(yè)務(wù)需求：就是首先先進(jìn)行一個ajax請求券犁，然后再進(jìn)行下一個ajax請求，而下一個請求需要使用上一個請求得到的數(shù)據(jù)，這樣一層層嵌套很繁瑣纽绍。
使用async 、await 異步處理這種問題會使代碼很優(yōu)美
先上一段代碼：
需求：test1方法執(zhí)行后再執(zhí)行test2方法
普通方法
function test1(params){
return new Promise((resolve,reject)=>{
setTimeout(()=>{
if (params >1) {
resolve('test1 resolve')
}else{
reject('test1 reject')
}
},2000)
})
}
function test2(){
console.log('test2')
}
function get(params){
test1(params).then(res=>{
console.log(res)
test2()
})
}
get(2)
image.png
重點(diǎn)來了：使用async势似、await 異步處理
function test1(params){
return new Promise((resolve,reject)=>{
setTimeout(()=>{
if (params >1) {
resolve('test1 resolve')
}else{
reject('test1 reject')
}
},2000)
})
}
function test2(){
console.log('test3')
}
async function get(params){ // 方法前加關(guān)鍵字 async 異步
await test1(params).then(res=>{console.log(res)}) // 加await 等待此方法請求成功后 再執(zhí)行下一段代碼
test2()
}
get(2)
image.png
若不加關(guān)鍵字async和await則執(zhí)行順序不如人意（有變）
function test1(params){
return new Promise((resolve,reject)=>{
setTimeout(()=>{
if (params >1) {
resolve('test1 resolve')
}else{
reject('test1 reject')
}
},2000)
})
}
function test2(){
console.log('test2')
}
function get(params){
test1(params).then(res=>{console.log(res)})
test2()
}
get(2)
image.png
借用例子：
function getCode(){
return axios.get('json/code.json');
}
function getlist(params){
return axios.get('json/person.json',{params})
}
function getFinal() {
getCode().then(function(res) {
if (res.data.code == 0) {
var params = {
code: res.data.code
}
getlist(params).then(function(res) {
if (res.data.code == 0) {
console.log(res.data.list)
}
})
}
})
}
getFinal()
// 改用async異步處理
async function getResult() {
try {
const code = await getCode()
if (code.data.code == 0) {
var params = {
code: code.data.code
}
const list = await getlist(params)
console.log(list.data.list)
}
} catch (err) {
console.log(err)
}
}
getResult()
