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

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

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

前言

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

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

1.1 普通函數(shù):

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

代碼示例:

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

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

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

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

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

代碼示例:

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

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

2. Promise 簡介

2.1 簡介

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

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

2.2 特點

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

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

3. Promise 基本用法

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

3.1 Promise then

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

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

1. 沒有傳參

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

代碼示例

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

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

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

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

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

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

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

// 創(chuàng)建一個promise對象
        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)建一個promise對象
        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)建一個promise對象
        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)造異常

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

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

3.2 Promise catch()

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

代碼示例:

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

 // 創(chuàng)建一個promise對象
        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)建一個異常
            //throw new Error("error message")
        })
 console.log("other code1")

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

3.3 async和await的使用

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

1. async

幫助我們使用簡潔的語法獲得一個promise對象

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

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

下面是兩種聲明的方式:

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

      }

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

代碼示例:

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

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

2. await

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

await的一些特點:

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

代碼示例:

還是跟據(jù)不用的的狀態(tài)來執(zhí)行不同的函數(shù),這里不同的是await可以當(dāng)做返回成功狀態(tài)的關(guān)鍵詞,因此不需要創(chuàng)建promise對象來調(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()

如圖所示: