Promise應(yīng)用

在工作中, 我們經(jīng)常會(huì)遇到用異步請(qǐng)求數(shù)據(jù), 查詢一個(gè)結(jié)果, 然后把返回的參數(shù)放入到下一個(gè)執(zhí)行的異步函數(shù)像這樣:

$.ajax({..., success(resp)=>{
	$.ajax({..., resp.id, success(resp)=>{
		$.ajax({..., resp.name success(resp)=>{
			//多層嵌套的情況, 看著是不是很難受
		}})
	}})
}})

當(dāng)我們使用Promise后, 我們的程序就變成了這樣:

let userInfo = ()=> {
    return new Promise((resolve, reject) => {
        console.log('查詢用戶信息...')
        resolve('王二')
    })
}

let orderInfo = (userName)=> {
    return new Promise((resolve, reject) => {
        console.log(`查詢用戶${userName}的訂單信息...`)
        resolve('ORDER_20230820000000001')
    })
}

userInfo().then(resp=>{
    return orderInfo(resp)
}).then(resp=>{
    console.log(resp)
})

控制臺(tái)輸出如下:

查詢用戶信息...
查詢用戶王二的訂單信息...
ORDER_20230820000000001

async/await應(yīng)用

看是不是簡(jiǎn)潔很多了, 如果你不想使用這種鏈?zhǔn)秸{(diào)用, 也可以結(jié)合async/await來實(shí)現(xiàn)同步執(zhí)行, 我們來稍微改一下userInfo函數(shù), 讓它模擬異步請(qǐng)求, 像下面這樣:

let userInfo = ()=> {
    return new Promise((resolve, reject) => {
        console.log(new Date().toLocaleString()+' 查詢用戶信息...')
        //這里我們模擬異步請(qǐng)求, 等待三秒
        setTimeout(() => {
            resolve('王二')
        }, 3000)
    })
}

let orderInfo = (userName)=> {
    return new Promise((resolve, reject) => {
        console.log(new Date().toLocaleString()+` 查詢用戶${userName}的訂單信息...`)
        resolve('ORDER_20230820000000001')
    })
}

let main = async ()=> {
    let user = await userInfo()
    let order = await orderInfo(user);
    console.log(new Date().toLocaleString()+' '+order)
}
main()

控制臺(tái)輸出如下:

2023/8/20 10:52:23 查詢用戶信息...
2023/8/20 10:52:26 查詢用戶王二的訂單信息...
2023/8/20 10:52:26 ORDER_20230820000000001

注意看上面輸出, 第一行和第二行是間隔3秒的, 說明是同步往下執(zhí)行的, 這樣修改之后程序是不是簡(jiǎn)潔很多呢, 對(duì)于日后維護(hù)起來也方便許多啦

異常處理

下面我們來看看如何進(jìn)行異常處理, 在上面的栗子中我沒有演示拋出異常和拒絕動(dòng)作, 接下來看下如何處理異常和拒絕, 我們稍微改造一下代碼, 像下面這樣:

1. 如果角色名稱為空, 將拋出異常
2. 如果角色等于zs, 拒絕, 無權(quán)查詢
3. 否則可以查詢

let userInfo = (roleName)=> {
    return new Promise((resolve, reject) => {
        console.log(new Date().toLocaleString() + ' 查詢用戶信息...')

        if (!roleName) {
            // 這里模擬拋出異常
            throw new Error('參數(shù)為空,查詢異常')
        } else if (roleName === 'zs') {
            //拒絕標(biāo)識(shí)
            return reject('無權(quán)查詢')
        }

        //這里我們模擬異步請(qǐng)求, 等待三秒
        setTimeout(() => {
            resolve('王二')
        }, 3000)
    })
}

let main = async ()=> {
    try{
        //let user = await userInfo()
        let order = await orderInfo(user);
        console.log(new Date().toLocaleString()+' '+order)
    }catch (err) {
        //這里處理reject和error信息
        console.error(typeof err === 'object'?err.message:err)
    }
    
}
main()

參數(shù)為空時(shí)輸出:

2023/8/20 11:18:51 查詢用戶信息...
參數(shù)為空,查詢異常

參數(shù)為zs時(shí)輸出:

2023/8/20 11:19:12 查詢用戶信息...
無權(quán)查詢

參數(shù)為admin時(shí)輸出:

2023/8/20 11:19:46 查詢用戶信息...
2023/8/20 11:19:49 查詢用戶王二的訂單信息...
2023/8/20 11:19:49 ORDER_20230820000000001

當(dāng)然異常處理也可以用其他方式, 例如, 你可以在Promise提供的then和catch中處理, 像下面這樣:

userInfo('').then(resp=>{
    return orderInfo(resp)
}, err=>{
    //這里處理reject和error信息
    console.error(typeof err === 'object'?err.message:err)
})

或者像這樣

userInfo('zs').then(resp=>{
    return orderInfo(resp)
}).catch(err=>{
    //這里處理reject和error信息
    console.error(typeof err === 'object'?err.message:err)
})

怎么處理大家看自己習(xí)慣和實(shí)際需求吧文章來源地址http://www.zghlxwxcb.cn/news/detail-661943.html

到了這里，關(guān)于ES6 Promise/Async/Await使用的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！