Vue3中如何使用異步請求示例詳解

Posted on by

1、前言

接上節，我們初步體驗瞭layui-vue的用法。相比其他ui框架，layui-vue的數據結構顯得不是非常友好，但是經過數據拼湊也是能夠成功運行的。

今天我們就主要介紹下在實際開發中最常用到的前後端接口交互。因為大多數時候前端為瞭高性能，對於後端接口的調用都會采用異步的方式。那該如何在vue3中使用異步請求渲染頁面呢？

2、快速開始

2.1、思路

預期：前端急速響應、初始數據為空，異步接口響應後對頁面數據表格進行響應式更新。

我們都知道vue的核心特性就是響應式，為瞭能夠實現我們預期的效果，我們需要進行以下幾步。

  • 首先安裝axios
  • 封裝axios
  • 設計接口
  • 在vue視圖中將表格數據變量聲明為響應式。初始化空值。
  • 在vue視圖中異步調用接口
  • 將從後端獲取到的數據push到響應式變量中。

2.2、安裝&封裝axios

安裝axios

npm i axios --save

封裝axios

在src下新建request/svc.js，並對axios進行封裝

import axios from 'axios'
​
// 設置超時時間
axios.defaults.timeout = 5000
​
// 創建axios實例
const service = axios.create({
    baseURL: 'http://localhost:8000', // 所有的請求地址前綴部分
    timeout: 60000, // 請求超時時間毫秒
    withCredentials: true, // 異步請求攜帶cookie
    headers: {
        // 設置後端需要的傳參類型
        'Content-Type': 'application/json',
        'token': 'your token',
        // 'X-Requested-With': 'XMLHttpRequest',
    },
})
​
// 導出
export default service

如上，我們對axios進行簡單的封裝，已經能夠實現統一URL、超時時間和請求頭。

關於請求攔截等後續再進行講解。

2.3、設計接口

首先在src下新建apis/bugs.js文件，然後設計一個方法（接口）去調用後端接口。

// 導入axios實例
import httpRequest from '@/request/svc'
​
// 獲取BUG信息
export function apiGetBugs() {
    return httpRequest({
        url: 'bug3',
        method: 'get',
        params: {'dd': 'xxx'},
    })
}

如上，我們在接口文件中調用封裝的axios實例對後端的接口發起請求，並將請求相應對象返回。

2.4、設計視圖

有瞭上面的基礎，我們可以在vue的視圖中直接導入bugs.js中的接口，然後在實例的onMounted階段去異步調用接口，當接口返回後再去更新頁面。

<template>
    <!-- 上節的內容 -->
    <lay-button type="primary">原始按鈕</lay-button>
    <lay-button>默認按鈕</lay-button>
    <lay-button type="normal">百搭按鈕</lay-button>
    <lay-button type="warm">暖色按鈕</lay-button>
    <lay-button type="danger">警告按鈕</lay-button>
    <hr>
    <!-- 本節內容 -->
   <lay-table :columns="columns1" :dataSource="dataSource1"></lay-table>
</template>
​
<script>
    // 本節內容
import { onMounted,reactive } from 'vue'
import { apiGetBugs } from '@/apis/bugs'
​
export default {
  setup() {
        console.log('do something...')
        
        // 聲明表格數據變量未聲明式
        let dataSource1=reactive([])
        
        // 掛載階段異步調用接口
        onMounted(async()=>{
            let res = await apiGetBugs()
            const ret = res.data
            console.log(ret)
            
            // 將接口返回的數據push到響應式變量中
            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:"關閉",
                width:"200px",
                key:"close"
            },
            {
                title:"修復中",
                width:"200px",
                key:"fixing"
            },
            {
                title:"拒絕",
                width:"200px",
                key:"refused"
            },
            {
                title:"已修復",
                width:"200px",
                key:"fixed"
            },
            {
                title:"重新打開",
                width:"200px",
                key:"reopen",
                ellipsisTooltip: true
            }
        ]
   
        // 完整的layui-vue的表格數據結構
        return {
          columns1,
          dataSource1
        }
  }
}
​
</script>​
<style>
</style>

2.5、最終效果

以上，我們就完成瞭vue3的異步請求後端並完成頁面渲染。

總結

到此這篇關於Vue3中如何使用異步請求的文章就介紹到這瞭,更多相關Vue3使用異步請求內容請搜索WalkonNet以前的文章或繼續瀏覽下面的相關文章希望大傢以後多多支持WalkonNet！

推薦閱讀：