從零開(kāi)始Vue3數(shù)據(jù)交互之promise用法詳解

更新時(shí)間：2025年02月28日 09:35:12 作者：XError＿xiaoyu

這篇文章主要介紹了Axios的基本使用,包括異步編程的基礎(chǔ)知識(shí),如Promise的介紹、特點(diǎn)和基本用法,以及如何使用then、catch和async/await來(lái)處理異步操作,文中通過(guò)代碼介紹的非常詳細(xì),需要的朋友可以參考下

前言

本篇是在學(xué)習(xí)Axios時(shí)結(jié)合自己的筆記與記錄,在學(xué)習(xí)Axios之前首先需要學(xué)習(xí)promise語(yǔ)法以及需要了解的知識(shí),只有學(xué)習(xí)了這些,使用axios才會(huì)用起來(lái)很順手,并且能夠更加深入的理解和使用

1. 預(yù)先須知-普通函數(shù)和回調(diào)函數(shù)

1.1 普通函數(shù):

正常調(diào)用的函數(shù),一般函數(shù)執(zhí)行完畢后才會(huì)繼續(xù)執(zhí)行下一行代碼

代碼示例:

//普通函數(shù)
        function fun1(){
            console.log("fun1 invoked")
        }
        console.log("code1 invoked")
        //函數(shù)的調(diào)用

        fun1()  //執(zhí)行完函數(shù)才會(huì)執(zhí)行下面代碼
        console.log("code2 invoked")

如圖所示, 在執(zhí)行完普通函數(shù)里面的代碼后,才會(huì)繼續(xù)執(zhí)行后面的代碼

1.2 回調(diào)函數(shù):

一些特殊的函數(shù),表示未來(lái)才會(huì)執(zhí)行的一些功能,后續(xù)代碼不會(huì)等待該函數(shù)執(zhí)行完畢就開(kāi)始執(zhí)行了

代碼示例:

function fun1(){
            setTimeout(function (){
                console.log("fun1 invoked") 
            }, 2000);
        }
       
        console.log("code1 invoked")
        fun1()
        console.log("code2 invoked")

如圖所示并執(zhí)行代碼時(shí)沒(méi)有等函數(shù)執(zhí)行完后,再執(zhí)行,而是執(zhí)行完后,fun1()才執(zhí)行的

2. Promise 簡(jiǎn)介

2.1 簡(jiǎn)介

前端中的異步編程技術(shù)，類(lèi)似Java中的多線程+線程結(jié)果回調(diào)！

Promise 是異步編程的一種解決方案，比傳統(tǒng)的解決方案——回調(diào)函數(shù)和事件——更合理和更強(qiáng)大。它由社區(qū)最早提出和實(shí)現(xiàn)，ES6將其寫(xiě)進(jìn)了語(yǔ)言標(biāo)準(zhǔn)，統(tǒng)一了用法，原生提供了Promise對(duì)象。
所謂Promise，簡(jiǎn)單說(shuō)就是一個(gè)容器，里面保存著某個(gè)未來(lái)才會(huì)結(jié)束的事件（通常是一個(gè)異步操作）的結(jié)果。從語(yǔ)法上說(shuō)，Promise 是一個(gè)對(duì)象，從它可以獲取異步操作的消息。Promise 提供統(tǒng)一的 API，各種異步操作都可以用同樣的方法進(jìn)行處理。

2.2 特點(diǎn)

Promise對(duì)象有以下兩個(gè)特點(diǎn),記住下面的幾種狀態(tài)就可以了。

（1）Promise對(duì)象代表一個(gè)異步操作，<strong>有三種狀態(tài)：`Pending`（進(jìn)行中）、`Resolved`（已完成，又稱 Fulfilled）和`Rejected`（已失?。?lt;/strong>只有異步操作的結(jié)果，可以決定當(dāng)前是哪一種狀態(tài)，任何其他操作都無(wú)法改變這個(gè)狀態(tài)。這也是`Promise`這個(gè)名字的由來(lái)，它的英語(yǔ)意思就是“承諾”，表示其他手段無(wú)法改變。
?
（2）一旦狀態(tài)改變，就不會(huì)再變，任何時(shí)候都可以得到這個(gè)結(jié)果。Promise對(duì)象的狀態(tài)改變，只有兩種可能：從`<strong>Pending</strong>`變?yōu)閌<strong>Resolved</strong>`和從`<strong>Pending</strong>`變?yōu)閌<strong>Rejected</strong>`。只要這兩種情況發(fā)生，狀態(tài)就凝固了，不會(huì)再變了，會(huì)一直保持這個(gè)結(jié)果。

3. Promise 基本用法

ES6規(guī)定，Promise對(duì)象是一個(gè)構(gòu)造函數(shù)，用來(lái)生成Promise實(shí)例。

3.1 Promise then

resolve 函數(shù): 在promise的回調(diào)函數(shù)中如果調(diào)用resolve方法,promise會(huì)由pending轉(zhuǎn)換為resolved狀態(tài)
reject 函數(shù): 在promise的回調(diào)函數(shù)中如果調(diào)用reject方法,promise會(huì)由pending轉(zhuǎn)換為reject狀態(tài)

在下面的圖示中都可以看出,回調(diào)函數(shù)的特點(diǎn),不會(huì)等待函數(shù)執(zhí)行完才繼續(xù)執(zhí)行后面的代碼

1. 沒(méi)有傳參

3.1.1 沒(méi)有調(diào)用resolve 函數(shù)和reject 函數(shù)時(shí)

代碼示例

 // 創(chuàng)建一個(gè)promise對(duì)象
        let promise = new Promise(
            function (resolve,reject){
             // 這里代碼
             console.log("function invoked")
        })
 console.log("other code1")

promise.then(
            //等待promise對(duì)象狀態(tài)發(fā)生改變實(shí)才會(huì)執(zhí)行的代碼
            // function(){
            //     //promsie對(duì)象狀態(tài)轉(zhuǎn)換為resolved狀態(tài)時(shí)才會(huì)執(zhí)行的函數(shù)
            //     console.log("promise success")
            // }
            function(value){
                //promsie對(duì)象狀態(tài)轉(zhuǎn)換為resolved狀態(tài)時(shí)才會(huì)執(zhí)行的函數(shù)
                console.log("promise success:" + value)
            },
            // function(){
            //     //promsie對(duì)象狀態(tài)轉(zhuǎn)換為reject狀態(tài)時(shí)才會(huì)執(zhí)行的函數(shù)
            //     console.log("promise fail")
            // }
            function(value){
                //promsie對(duì)象狀態(tài)轉(zhuǎn)換為reject狀態(tài)時(shí)才會(huì)執(zhí)行的函數(shù)
                console.log("promise fail:"+ value)
            }
        )
        console.log("other code2")

此時(shí)還有沒(méi)有改變狀態(tài),可以看到此時(shí)還是按照代碼的順序來(lái)執(zhí)行的,此時(shí)是沒(méi)有執(zhí)行then中的代碼的

3.1.2 調(diào)用resolve()函數(shù)

// 創(chuàng)建一個(gè)promise對(duì)象
        let promise = new Promise(
            function (resolve,reject){
             // 這里代碼
             console.log("function invoked")
             resolve()
        })
 console.log("other code1")

如果沒(méi)有傳參的話可以先把then函數(shù)中的function中的value去掉

3.1.3 調(diào)用 reject()函數(shù)

// 創(chuàng)建一個(gè)promise對(duì)象
        let promise = new Promise(
            function (resolve,reject){
             // 這里代碼
             console.log("function invoked")
              reject()
        })
 console.log("other code1")

2. 傳參調(diào)用函數(shù)

3.1.4 調(diào)用resolve("good")函數(shù),并傳入?yún)?shù)good

// 創(chuàng)建一個(gè)promise對(duì)象
        let promise = new Promise(
            function (resolve,reject){
             // 這里代碼
             console.log("function invoked")
             resolve("good")
        })
 console.log("other code1")

3.1.5 調(diào)用reject("no")函數(shù),并傳入?yún)?shù)no

// 創(chuàng)建一個(gè)promise對(duì)象
        let promise = new Promise(
            function (resolve,reject){
             // 這里代碼
             console.log("function invoked")
             reject("no")
        })
 console.log("other code1")

3.出現(xiàn)異常情況

3.1.6 人為構(gòu)造異常

這里通過(guò)構(gòu)建異常情況,并傳遞錯(cuò)誤信息參數(shù)

// 創(chuàng)建一個(gè)promise對(duì)象
        let promise = new Promise(
            function (resolve,reject){
             // 這里代碼
             console.log("function invoked")
              // 人為構(gòu)建一個(gè)異常
            throw new Error("error message")
        })
 console.log("other code1")

3.2 Promise catch()

Promise.prototype.catch方法是.then(null, rejection)的別名，用于指定發(fā)生錯(cuò)誤時(shí)的回調(diào)函數(shù)。

代碼示例:

這里操作其實(shí)和上面的是一致的,需要什么狀態(tài)時(shí)就改為對(duì)應(yīng)的函數(shù)調(diào)用

 // 創(chuàng)建一個(gè)promise對(duì)象
        let promise = new Promise(
            function (resolve,reject){
             // 這里代碼
             console.log("function invoked")
              // 1. 普通調(diào)用函數(shù)
                //調(diào)用resolve函數(shù)
                //  resolve()
                //調(diào)用reject函數(shù)
                //  reject()
            // 2. 傳參調(diào)用函數(shù)
            resolve("good")
            // reject("no")

            // //人為構(gòu)建一個(gè)異常
            //throw new Error("error message")
        })
 console.log("other code1")

console.log("other code1")
        // 繼續(xù)調(diào)用
        promise.then(
            //等待promise對(duì)象狀態(tài)發(fā)生改變實(shí)才會(huì)執(zhí)行的代碼
            // function(){
            //     //promsie對(duì)象狀態(tài)轉(zhuǎn)換為resolved狀態(tài)時(shí)才會(huì)執(zhí)行的函數(shù)
            //     console.log("promise success")
            // }
            function(value){
                //promsie對(duì)象狀態(tài)轉(zhuǎn)換為resolved狀態(tài)時(shí)才會(huì)執(zhí)行的函數(shù)
                console.log("promise success:" + value)
            },
        ).catch(
            // 用catch處理時(shí)可以把then中第二個(gè)function省略
            function(value){
                //當(dāng)promise狀態(tài)是reject或者 promsie出現(xiàn)異常時(shí) 會(huì)執(zhí)行的函數(shù)
                console.log("promise catch:"+ value)
            }
        )
        console.log("other code2")

3.3 async和await的使用

async和await是ES6中用于處理異步操作的新特性。通常，異步操作會(huì)涉及到Promise對(duì)象，而async/await則是在Promise基礎(chǔ)上提供了更加直觀和易于使用的語(yǔ)法。

1. async

幫助我們使用簡(jiǎn)潔的語(yǔ)法獲得一個(gè)promise對(duì)象

async 用于標(biāo)識(shí)函數(shù)的(聲明為一個(gè)回調(diào)函數(shù))下面是它的一些特點(diǎn):

  async 幫助我們使用簡(jiǎn)潔的語(yǔ)法獲得一個(gè)promise對(duì)象
                let promise = new Promise((){})
                async function aaa(){}
                1. async 用于標(biāo)識(shí)函數(shù)的,async函數(shù)返回的結(jié)果就是一個(gè)promise對(duì)象
                2. 方法如果正常return結(jié)果promise狀態(tài)就還是resolved return后的結(jié)果就是成功狀態(tài)的返回值
                3. 方法中出現(xiàn)了異常,則返回的promise就是一個(gè)失敗狀態(tài)
                4.  async函數(shù)返回的結(jié)果如果是一個(gè)promise,則狀態(tài)由內(nèi)部的promise來(lái)決定

下面是兩種聲明的方式:

       //通過(guò)async直接聲明一個(gè)回調(diào)函數(shù)
       async function aaa(){

      }

       //通過(guò)箭頭函數(shù)聲明回調(diào)函數(shù)
        let aaa = async() =>{
            
       }

代碼示例:

基本上還是跟之前寫(xiě)的查不多,promise在不同狀態(tài)時(shí)就會(huì)調(diào)用對(duì)應(yīng)的方法

async function fun1(){
        // return 888
        // throw new Error("something wrong")
        //快速創(chuàng)建一個(gè)resolve對(duì)象并返回
        // let promise = Promise.resolve("nice")
        //快速創(chuàng)建一個(gè)reject對(duì)象并返回
        let promise = Promise.reject("no")
        return promise
    }
    //調(diào)用fun1函數(shù)返回promise對(duì)象
    let promise= fun1()
    //調(diào)用promise對(duì)象的then和catch方法
    promise.then(
        function(value){
            //promsie對(duì)象狀態(tài)轉(zhuǎn)換為resolved狀態(tài)時(shí)才會(huì)執(zhí)行的函數(shù)
            console.log("success:" + value)
        }
    ).catch(
        function(value){
             //當(dāng)promise狀態(tài)是reject或者 promsie出現(xiàn)異常時(shí) 會(huì)執(zhí)行的函數(shù)
            console.log("fail:" + value)
        }
    )

2. await

幫助我們成功獲得promise成功狀態(tài)的返回值的關(guān)鍵字

await的一些特點(diǎn):

await 幫助我們成功獲得promise成功狀態(tài)的返回值的關(guān)鍵字
                1. await 右邊如果是一個(gè)普通值,則直接返回該值,如果右邊是promise,返回promise成功狀態(tài)的結(jié)果 let res = await "張三" res 就是張三,那么用await干嘛
                   let res await "張三"
                   let res = await Promise.resolve("張三")
                       此時(shí)res = "張三"
                2. await 右邊如果是一個(gè)失敗狀態(tài)的promise 那么await會(huì)直接拋出異常
                3. await 關(guān)鍵字必須在async修飾的函數(shù)中使用,async函數(shù)中可以沒(méi)有await關(guān)鍵字
                4. await 在存在await方法的內(nèi)部后邊的代碼會(huì)等待await執(zhí)行完畢后繼續(xù)執(zhí)行

代碼示例:

還是跟據(jù)不用的的狀態(tài)來(lái)執(zhí)行不同的函數(shù),這里不同的是await可以當(dāng)做返回成功狀態(tài)的關(guān)鍵詞,因此不需要?jiǎng)?chuàng)建promise對(duì)象來(lái)調(diào)用了,而是直接使用await

   async function fun1(){
        return 888
    }
    async function fun2(){
        try{
                let res = await fun1()
                // let res = await Promise.reject("something wrong")
                console.log("await got:" + res)
        }catch(e){
            console.log("catch got:" + e)
        }
       
    }
    fun2()

async function fun1(){
        return 888
    }
    async function fun2(){
        try{
                // let res = await fun1()
                let res = await Promise.reject("something wrong")
                console.log("await got:" + res)
        }catch(e){
            console.log("catch got:" + e)
        }
       
    }
    fun2()

如圖所示: