Vue3中如何使用異步請(qǐng)求示例詳解
1、前言
接上節(jié),我們初步體驗(yàn)了layui-vue的用法。相比其他ui框架,layui-vue的數(shù)據(jù)結(jié)構(gòu)顯得不是非常友好,但是經(jīng)過數(shù)據(jù)拼湊也是能夠成功運(yùn)行的。
今天我們就主要介紹下在實(shí)際開發(fā)中最常用到的前后端接口交互。因?yàn)榇蠖鄶?shù)時(shí)候前端為了高性能,對(duì)于后端接口的調(diào)用都會(huì)采用異步的方式。那該如何在vue3中使用異步請(qǐng)求渲染頁面呢?
2、快速開始
2.1、思路
預(yù)期:前端急速響應(yīng)、初始數(shù)據(jù)為空,異步接口響應(yīng)后對(duì)頁面數(shù)據(jù)表格進(jìn)行響應(yīng)式更新。
我們都知道vue的核心特性就是響應(yīng)式,為了能夠?qū)崿F(xiàn)我們預(yù)期的效果,我們需要進(jìn)行以下幾步。
- 首先安裝axios
- 封裝axios
- 設(shè)計(jì)接口
- 在vue視圖中將表格數(shù)據(jù)變量聲明為響應(yīng)式。初始化空值。
- 在vue視圖中異步調(diào)用接口
- 將從后端獲取到的數(shù)據(jù)push到響應(yīng)式變量中。
2.2、安裝&封裝axios
安裝axios
npm i axios --save
封裝axios
在src
下新建request/svc.js
,并對(duì)axios進(jìn)行封裝
import axios from 'axios' ? // 設(shè)置超時(shí)時(shí)間 axios.defaults.timeout = 5000 ? // 創(chuàng)建axios實(shí)例 const service = axios.create({ baseURL: 'http://localhost:8000', // 所有的請(qǐng)求地址前綴部分 timeout: 60000, // 請(qǐng)求超時(shí)時(shí)間毫秒 withCredentials: true, // 異步請(qǐng)求攜帶cookie headers: { // 設(shè)置后端需要的傳參類型 'Content-Type': 'application/json', 'token': 'your token', // 'X-Requested-With': 'XMLHttpRequest', }, }) ? // 導(dǎo)出 export default service
如上,我們對(duì)axios進(jìn)行簡(jiǎn)單的封裝,已經(jīng)能夠?qū)崿F(xiàn)統(tǒng)一URL、超時(shí)時(shí)間和請(qǐng)求頭。
關(guān)于請(qǐng)求攔截等后續(xù)再進(jìn)行講解。
2.3、設(shè)計(jì)接口
首先在src
下新建apis/bugs.js
文件,然后設(shè)計(jì)一個(gè)方法(接口)去調(diào)用后端接口。
// 導(dǎo)入axios實(shí)例 import httpRequest from '@/request/svc' ? // 獲取BUG信息 export function apiGetBugs() { return httpRequest({ url: 'bug3', method: 'get', params: {'dd': 'xxx'}, }) }
如上,我們?cè)诮涌谖募姓{(diào)用封裝的axios實(shí)例對(duì)后端的接口發(fā)起請(qǐng)求,并將請(qǐng)求相應(yīng)對(duì)象返回。
2.4、設(shè)計(jì)視圖
有了上面的基礎(chǔ),我們可以在vue的視圖中直接導(dǎo)入bugs.js中的接口,然后在實(shí)例的onMounted階段去異步調(diào)用接口,當(dāng)接口返回后再去更新頁面。
<template> <!-- 上節(jié)的內(nèi)容 --> <lay-button type="primary">原始按鈕</lay-button> <lay-button>默認(rèn)按鈕</lay-button> <lay-button type="normal">百搭按鈕</lay-button> <lay-button type="warm">暖色按鈕</lay-button> <lay-button type="danger">警告按鈕</lay-button> <hr> <!-- 本節(jié)內(nèi)容 --> <lay-table :columns="columns1" :dataSource="dataSource1"></lay-table> </template> ? <script> // 本節(jié)內(nèi)容 import { onMounted,reactive } from 'vue' import { apiGetBugs } from '@/apis/bugs' ? export default { setup() { console.log('do something...') // 聲明表格數(shù)據(jù)變量未聲明式 let dataSource1=reactive([]) // 掛載階段異步調(diào)用接口 onMounted(async()=>{ let res = await apiGetBugs() const ret = res.data console.log(ret) // 將接口返回的數(shù)據(jù)push到響應(yīng)式變量中 dataSource1.push(...[{close:ret[0][0],fixing:ret[0][1],refused:ret[0][2],fixed:ret[0][3],reopen:ret[0][4]},]) }) // 表頭 const columns1 = [ { title:"關(guān)閉", width:"200px", key:"close" }, { title:"修復(fù)中", width:"200px", key:"fixing" }, { title:"拒絕", width:"200px", key:"refused" }, { title:"已修復(fù)", width:"200px", key:"fixed" }, { title:"重新打開", width:"200px", key:"reopen", ellipsisTooltip: true } ] // 完整的layui-vue的表格數(shù)據(jù)結(jié)構(gòu) return { columns1, dataSource1 } } } ? </script>? <style> </style>
2.5、最終效果
以上,我們就完成了vue3的異步請(qǐng)求后端并完成頁面渲染。
總結(jié)
到此這篇關(guān)于Vue3中如何使用異步請(qǐng)求的文章就介紹到這了,更多相關(guān)Vue3使用異步請(qǐng)求內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
Vue3 Ref獲取真實(shí)DOM學(xué)習(xí)實(shí)戰(zhàn)
這篇文章主要為大家介紹了Vue3 Ref獲取真實(shí)DOM學(xué)習(xí)實(shí)戰(zhàn)示例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-06-06vue.js中使用echarts實(shí)現(xiàn)數(shù)據(jù)動(dòng)態(tài)刷新功能
這篇文章主要介紹了vue.js中使用echarts實(shí)現(xiàn)數(shù)據(jù)動(dòng)態(tài)刷新功能,需要的朋友可以參考下2019-04-04Vue3+TypeScript+Vite使用require動(dòng)態(tài)引入圖片等靜態(tài)資源
本文主要介紹了Vue3+TypeScript+Vite使用require動(dòng)態(tài)引入圖片等靜態(tài)資源,文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2022-07-07vue中el-tree增加節(jié)點(diǎn)后如何重新刷新
這篇文章主要介紹了vue中el-tree增加節(jié)點(diǎn)后如何重新刷新,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2022-08-08antd vue 如何調(diào)整checkbox默認(rèn)樣式
這篇文章主要介紹了antd vue 如何調(diào)整checkbox默認(rèn)樣式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2022-12-12vue項(xiàng)目接口管理,所有接口都在apis文件夾中統(tǒng)一管理操作
這篇文章主要介紹了vue項(xiàng)目接口管理,所有接口都在apis文件夾中統(tǒng)一管理操作,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2020-08-08