Vue Axios異步與數(shù)據(jù)類型轉(zhuǎn)換問題淺析
axios 請(qǐng)求中異步與否問題
眾所周知,axios 請(qǐng)求有些請(qǐng)求需要配合異步函數(shù)來實(shí)現(xiàn),我大概總結(jié)了兩種適配場(chǎng)景:
不使用異步:后端響應(yīng)值對(duì)后續(xù)操作無影響,我們僅需要判斷這個(gè)請(qǐng)求是否成功的情況下
使用異步:我們需要存儲(chǔ)后端響應(yīng)值并使用它進(jìn)行某些渲染操作
不使用異步的例子
參考我們上一節(jié)的最后一塊,我們抽離了登錄校驗(yàn)的 axios 請(qǐng)求,這是具體代碼
可見,我們只需要把本地 token 傳遞給后端,經(jīng)過后端 jwt 驗(yàn)證并返回一個(gè)成功狀態(tài)碼 200,既然成功了,自然就會(huì)執(zhí)行 then 內(nèi)的方法,此時(shí)我們無需對(duì)響應(yīng)體做出任何判斷都可以明確的知道此次登錄驗(yàn)證是成功的,所以直接返回一個(gè)布爾值 true 即可
這里就不需要使用到異步函數(shù)
validateLogin: (url, uname, pwd) => { // 使用post請(qǐng)求,請(qǐng)求體data即傳入兩個(gè)必要值 http .post(url, { username: uname, password: pwd, }) // 在then中處理請(qǐng)求成功的方法 .then((res) => { console.log(res); let token = res.data.msg; localStorage.setItem("token", token); fastMessage.success("成功登錄!"); }) // 在catch中處理請(qǐng)求失敗的方法 .catch((err) => { fastMessage.error("用戶名或密碼錯(cuò)誤!"); return false; }); // 返回值有無取決于你的項(xiàng)目需求 return true; },
使用異步的例子
一般的,在我們使用 axios 請(qǐng)求后端服務(wù)器時(shí)必定會(huì)有一小段往返時(shí)間,假設(shè)我們不使用異步函數(shù),那么就會(huì)造成還沒有取回響應(yīng)體就直接返回了,那么必然會(huì)得到一個(gè)空值!
使用 try...catch...
代碼塊處理響應(yīng)成功與否,因?yàn)?catch 能捕獲到任意層次深度的任意錯(cuò)誤,故 axios 請(qǐng)求一旦失敗則必被捕獲!
異步執(zhí)行請(qǐng)求保證了我們獲取的響應(yīng)體值為后端數(shù)據(jù),最后的 return 也能正確的返回帶值變量
import http from "./http.js"; let userDatas; // 異步函數(shù),發(fā)送后端查詢數(shù)據(jù)庫(kù)得到所有用戶信息 async function userDataQuery(url) { try { // 異步請(qǐng)求后端并拿到結(jié)構(gòu)Promise let res = await http.get(url); // 將獲取到的響應(yīng)體中的值賦予給全局變量 userDatas = res.data.data; console.log(userDatas); } catch (err) { console.log("這TMD是錯(cuò)的"); } // 返回全局變量 return userDatas; } export default { userDataQuery, };
同志醒醒,這還沒完,因?yàn)槲覀兪褂?async 構(gòu)造異步函數(shù),無論該函數(shù)返回啥,結(jié)果都是一個(gè) promise 對(duì)象,我們只需要最后一步,對(duì)其進(jìn)行數(shù)據(jù)提取并存儲(chǔ)就完事了!??!
請(qǐng)看模塊的 script 部分代碼:
這里使用了 pinia 進(jìn)行數(shù)據(jù)存儲(chǔ),setUsersList 是 actions 中的一個(gè)方法,它是用來設(shè)置 state 中的其中一個(gè)變量的值的,這一步操作下來即可把我們要的數(shù)據(jù)存儲(chǔ)到 store 里面了!
因?yàn)樽兞?datas 已被 reactive 響應(yīng)式,故 store 的更新也會(huì)帶動(dòng)該變量的更新,同時(shí)帶動(dòng)對(duì)應(yīng)渲染的更新
import { onMounted, reactive, ref } from "vue"; import apiQuery from "../../api/api-query.js"; import dbStore from "../../store/db-store.js"; const store = dbStore(); let datas = reactive(store.$state.userLists); // 執(zhí)行最后一步的promise處理 apiQuery.userDataQuery("/sdb/allusers").then((res) => { // 調(diào)用store中的方法直接把數(shù)據(jù)存儲(chǔ)到status域中的變量 store.setUsersList(res); // 隨意輸出一些內(nèi)容作為驗(yàn)證 console.log(res); });
對(duì)象與數(shù)組轉(zhuǎn)換
執(zhí)行異步 axios 請(qǐng)求時(shí),對(duì)于 POST 類型的數(shù)據(jù)存儲(chǔ)往往會(huì)遇到 formdata 是一個(gè)對(duì)象,而我們 vue 渲染時(shí)需要的偏偏就得是數(shù)組類型的
這一步可以在 store 中的 actions 配置的方法里面進(jìn)行處理
此處簡(jiǎn)單的使用了 foreach 把對(duì)象內(nèi)容一一壓入數(shù)組的方式實(shí)現(xiàn),請(qǐng)注意每次執(zhí)行該方法是變量值的配置?。?!
import { defineStore } from "pinia"; import Names from "./names.js"; const dbStore = defineStore(Names.DBSTORE, { // 隨意配置一個(gè)數(shù)組變量userLists state: () => { return { userLists: [], }; }, actions: { // 設(shè)置變量的值,形參data即傳來的對(duì)象object setUsersList(data) { // 轉(zhuǎn)換前務(wù)必清空變量值,否則會(huì)造成值重復(fù)添加現(xiàn)象 this.userLists = []; // foreach將對(duì)象中的值一個(gè)個(gè)取出來添加到數(shù)組里面 for (let i in data) { console.log(data[i]); this.userLists.push(data[i]); } }, }, getters: {}, }); export default dbStore;
到此這篇關(guān)于Vue Axios異步與數(shù)據(jù)類型轉(zhuǎn)換問題淺析的文章就介紹到這了,更多相關(guān)Vue Axios異步內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
詳解vue2如何實(shí)現(xiàn)點(diǎn)擊預(yù)覽本地文件
這篇文章主要為大家詳細(xì)介紹了vue2如何實(shí)現(xiàn)點(diǎn)擊預(yù)覽本地的word、excle、pdf文件,感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下2024-04-04vue實(shí)現(xiàn)文章內(nèi)容過長(zhǎng)點(diǎn)擊閱讀全文功能的實(shí)例
下面小編就為大家分享一篇vue實(shí)現(xiàn)文章內(nèi)容過長(zhǎng)點(diǎn)擊閱讀全文功能的實(shí)例,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2017-12-12Vue實(shí)現(xiàn)點(diǎn)擊后文字變色切換方法
下面小編就為大家分享一篇Vue實(shí)現(xiàn)點(diǎn)擊后文字變色切換方法,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2018-02-02Vue如何在CSS中使用data定義的數(shù)據(jù)淺析
這篇文章主要給大家介紹了關(guān)于Vue如何在CSS中使用data定義的數(shù)據(jù)的相關(guān)資料,文中通過實(shí)例代碼介紹的非常詳細(xì),對(duì)大家學(xué)習(xí)或者使用vue具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2022-05-05vue實(shí)現(xiàn)廣告欄上下滾動(dòng)效果
這篇文章主要介紹了vue實(shí)現(xiàn)廣告欄上下滾動(dòng)效果,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2020-11-11圖文詳解vue中proto文件的函數(shù)調(diào)用
這篇文章主要給大家介紹了vue中proto文件函數(shù)調(diào)用的相關(guān)資料,文中通過示例代碼介紹的非常詳細(xì),對(duì)大家學(xué)習(xí)或者使用vue具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2021-08-08詳解windows下vue-cli及webpack 構(gòu)建網(wǎng)站(三)使用組件
本篇文章主要介紹了詳解windows下vue-cli及webpack 構(gòu)建網(wǎng)站(三)使用組件,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2017-06-06