從零開始Vue3數(shù)據(jù)交互之promise用法詳解
前言
本篇是在學習Axios時結合自己的筆記與記錄,在學習Axios之前首先需要學習promise語法以及需要了解的知識,只有學習了這些,使用axios才會用起來很順手,并且能夠更加深入的理解和使用
1. 預先須知-普通函數(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 簡介
前端中的異步編程技術，類似Java中的多線程+線程結果回調(diào)！
Promise 是異步編程的一種解決方案，比傳統(tǒng)的解決方案——回調(diào)函數(shù)和事件——更合理和更強大。它由社區(qū)最早提出和實現(xiàn)，ES6將其寫進了語言標準，統(tǒng)一了用法，原生提供了Promise對象。
所謂
Promise，簡單說就是一個容器，里面保存著某個未來才會結束的事件（通常是一個異步操作）的結果。從語法上說，Promise 是一個對象，從它可以獲取異步操作的消息。Promise 提供統(tǒng)一的 API，各種異步操作都可以用同樣的方法進行處理。
2.2 特點
Promise對象有以下兩個特點,記住下面的幾種狀態(tài)就可以了。
（1）Promise對象代表一個異步操作，<strong>有三種狀態(tài)：`Pending`（進行中）、`Resolved`（已完成，又稱 Fulfilled）和`Rejected`（已失?。?。</strong>只有異步操作的結果，可以決定當前是哪一種狀態(tài)，任何其他操作都無法改變這個狀態(tài)。這也是`Promise`這個名字的由來，它的英語意思就是“承諾”，表示其他手段無法改變。 ? （2）一旦狀態(tài)改變，就不會再變，任何時候都可以得到這個結果。Promise對象的狀態(tài)改變，只有兩種可能：從`<strong>Pending</strong>`變?yōu)閌<strong>Resolved</strong>`和從`<strong>Pending</strong>`變?yōu)閌<strong>Rejected</strong>`。只要這兩種情況發(fā)生，狀態(tài)就凝固了，不會再變了，會一直保持這個結果。
3. Promise 基本用法
ES6規(guī)定，Promise對象是一個構造函數(shù)，用來生成Promise實例。
3.1 Promise then
- resolve 函數(shù): 在promise的回調(diào)函數(shù)中如果調(diào)用resolve方法,promise會由pending轉換為resolved狀態(tài)
- reject 函數(shù): 在promise的回調(diào)函數(shù)中如果調(diào)用reject方法,promise會由pending轉換為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)轉換為resolved狀態(tài)時才會執(zhí)行的函數(shù)
// console.log("promise success")
// }
function(value){
//promsie對象狀態(tài)轉換為resolved狀態(tài)時才會執(zhí)行的函數(shù)
console.log("promise success:" + value)
},
// function(){
// //promsie對象狀態(tài)轉換為reject狀態(tài)時才會執(zhí)行的函數(shù)
// console.log("promise fail")
// }
function(value){
//promsie對象狀態(tài)轉換為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 人為構造異常
這里通過構建異常情況,并傳遞錯誤信息參數(shù)
// 創(chuàng)建一個promise對象
let promise = new Promise(
function (resolve,reject){
// 這里代碼
console.log("function invoked")
// 人為構建一個異常
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)時就改為對應的函數(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")
// //人為構建一個異常
//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)轉換為resolved狀態(tài)時才會執(zhí)行的函數(shù)
// console.log("promise success")
// }
function(value){
//promsie對象狀態(tài)轉換為resolved狀態(tài)時才會執(zhí)行的函數(shù)
console.log("promise success:" + value)
},
).catch(
// 用catch處理時可以把then中第二個function省略
function(value){
//當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基礎上提供了更加直觀和易于使用的語法。
1. async
幫助我們使用簡潔的語法獲得一個promise對象
async 用于標識函數(shù)的(聲明為一個回調(diào)函數(shù))下面是它的一些特點:
async 幫助我們使用簡潔的語法獲得一個promise對象
let promise = new Promise((){})
async function aaa(){}
1. async 用于標識函數(shù)的,async函數(shù)返回的結果就是一個promise對象
2. 方法如果正常return結果promise狀態(tài)就還是resolved return后的結果就是成功狀態(tài)的返回值
3. 方法中出現(xiàn)了異常,則返回的promise就是一個失敗狀態(tài)
4. async函數(shù)返回的結果如果是一個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)用對應的方法
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)轉換為resolved狀態(tài)時才會執(zhí)行的函數(shù)
console.log("success:" + value)
}
).catch(
function(value){
//當promise狀態(tài)是reject或者 promsie出現(xiàn)異常時 會執(zhí)行的函數(shù)
console.log("fail:" + value)
}
)
2. await
幫助我們成功獲得promise成功狀態(tài)的返回值的關鍵字
await的一些特點:
await 幫助我們成功獲得promise成功狀態(tài)的返回值的關鍵字
1. await 右邊如果是一個普通值,則直接返回該值,如果右邊是promise,返回promise成功狀態(tài)的結果 let res = await "張三" res 就是張三,那么用await干嘛
let res await "張三"
let res = await Promise.resolve("張三")
此時res = "張三"
2. await 右邊如果是一個失敗狀態(tài)的promise 那么await會直接拋出異常
3. await 關鍵字必須在async修飾的函數(shù)中使用,async函數(shù)中可以沒有await關鍵字
4. await 在存在await方法的內(nèi)部后邊的代碼會等待await執(zhí)行完畢后繼續(xù)執(zhí)行代碼示例:
還是跟據(jù)不用的的狀態(tài)來執(zhí)行不同的函數(shù),這里不同的是await可以當做返回成功狀態(tài)的關鍵詞,因此不需要創(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()如圖所示:
總結
到此這篇關于Vue3數(shù)據(jù)交互之promise用法詳解的文章就介紹到這了,更多相關Vue3數(shù)據(jù)交互promise詳解內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！
相關文章
這篇文章主要給大家介紹了關于vue打包后dist文件在本地啟動運行的簡單步驟,文中通過代碼示例以及圖文介紹的非常詳細,對大家學習或者使用vue具有一定的參考價值,需要的朋友可以參考下2023-09-09
這篇文章主要介紹了關于antd-vue?a-menu菜單綁定路由的相關問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-10-10
在開發(fā)中我們經(jīng)常遇到這樣的需求,需要用戶直接點擊一個鏈接進入到一個頁面,下面這篇文章主要給大家介紹了關于如何利用vue實現(xiàn)登陸界面及其跳轉的相關資料,需要的朋友可以參考下2023-04-04
解決vue中使用swiper插件問題及swiper在vue中的用法
Swiper是純javascript打造的滑動特效插件，面向手機、平板電腦等移動終端。這篇文章主要介紹了解決vue中使用swiper插件及swiper在vue中的用法,需要的朋友可以參考下2018-04-04
這篇文章主要介紹了Vue組件之極簡的地址選擇器的實現(xiàn)，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-05-05
今天小編就為大家分享一篇vue獲取form表單的值示例，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2019-10-10
Vue.js的組件的使用有3個步驟：創(chuàng)建組件構造器、注冊組件和使用組件。這篇文章主要介紹了vue 注冊組件的使用,非常不錯,具有參考借鑒價值,需要的朋友可以參考下2018-05-05
ue3上線已經(jīng)很久了,許多小伙伴應該都已經(jīng)使用過vue3了,下面這篇文章主要給大家介紹了關于Vue3.2單文件組件setup的語法糖與新特性總結的相關資料,文中通過示例代碼介紹的非常詳細,需要的朋友可以參考下2022-07-07
這篇文章主要為大家詳細介紹了Vue3編寫氣泡對話框組件，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-08-08
這篇文章主要介紹了vue?element如何添加遮罩層問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-03-03