vue使用axios實現(xiàn)動態(tài)追加數(shù)據(jù)

更新時間：2023年10月26日 10:37:05 作者：itclanCoder

在vuejs中使用axios時,有時候需要追加數(shù)據(jù),比如,移動端下拉觸底加載,分頁加載,滑動滾動條等,下面小編就來為大家介紹一下如何使用使用axios實現(xiàn)動態(tài)追加數(shù)據(jù)吧

前言

在vuejs中使用axios時，有時候需要追加數(shù)據(jù),比如,移動端下拉觸底加載,分頁加載,滑動滾動條,等等,這時候就需要追加數(shù)據(jù)了,下面我們來演示下.

代碼演示

<template>
    <div>
          <div>
            <el-button type="primary"  @click="handleBtnGetJoke">請求數(shù)據(jù)</el-button>
            <el-button type="danger" @click="handleBtnClearData" v-if="aDatas.length > 0?true:false">清空數(shù)據(jù)</el-button>
          </div>  
          <div>
            <ul v-if="aDatas.length > 0?true:false">
                <li class="joke-list" v-for="item in aDatas"
                                    :key="item.hashId">{{ item.content }}
                </li>
                <div class="loading" v-if="aDatas.length > 0?true:false"> 
                    <el-button size="mini"  type="primary" @click="handleBtnLoading" >加載</el-button>
                </div>
            </ul> 
          </div>
    </div>
</template>

<script setup>
import axios from "axios";
import { ref  } from "vue";

let aDatas = ref([]);
let page = ref(1);
let pagesize = ref(5);

async function handleBtnGetJoke() {
    const params = {
        key: 'aa1b7ad08be2a09a4e0d2d46897e2dc8',
        page: page.value,
        pagesize:pagesize.value,
        time: 1418816972
    }

    const response =  await axios.get('/api/joke/content/text.php',{params})
    console.log(response);
    if(response.status == 200) {
        const { data } = response.data.result;
        console.log(data);
        // 之類使用了concat方法,將數(shù)據(jù)疊加到aDatas中
        aDatas.value = aDatas.value.concat(data);
    }
}

// 加載數(shù)據(jù),疊加
function handleBtnLoading() {
    // 頁碼+1,自增
    page.value++;
    // 重新加載數(shù)據(jù)
    handleBtnGetJoke(); 
}

// 清空數(shù)據(jù)
function handleBtnClearData() {
    aDatas.value = [];
}
</script>

<style scoped>
.joke-list {
    list-style-type: decimal;
    list-style-position: outside;
    padding: 5px 0;
    border-bottom: dashed 1px #ccc;
}

.loading {
    margin: 0 auto;
    text-align:center;
}
</style>

在上面的示例代碼中,實現(xiàn)數(shù)據(jù)的追加, 需要使用concat方法, 該方法用于合并兩個或多個數(shù)組,核心就是如下一行代碼

新的數(shù)據(jù)和舊data合并, 然后賦值給aDatas.value

aDatas.value = aDatas.value.concat(data);

而點擊加載更多數(shù)據(jù), 需要使用handleBtnLoading方法, 該方法中, 頁碼+1, 然后重新加載數(shù)據(jù),調(diào)用一次handleBtnGetJoke方法, 該方法中, 請求數(shù)據(jù), 然后將數(shù)據(jù)追加到aDatas.value中, 這樣就實現(xiàn)了數(shù)據(jù)的追加

如果不進行,頁碼page.value++, 數(shù)據(jù)不會追加, 因為數(shù)據(jù)是異步加載的, 需要等待數(shù)據(jù)加載完成, 才能追加數(shù)據(jù)

 // 頁碼+1,自增
    page.value++;
    // 重新加載數(shù)據(jù)
    handleBtnGetJoke();

如果想一上來就加載數(shù)據(jù)

需要從vue中引入onMounted,方法, 該方法, 會在組件掛載完成后, 執(zhí)行, 這樣, 就可以在掛載完成后, 調(diào)用handleBtnGetJoke方法, 加載數(shù)據(jù)

import { onMounted } from 'vue';

onMounted(() =>  {
    // 調(diào)用handleBtnGetJoke方法, 加載數(shù)據(jù)
    handleBtnGetJoke();
})

很多初學者, 不知道如何實現(xiàn)數(shù)據(jù)的追加, 其實很簡單, 就是使用concat方法, 然后將數(shù)據(jù)追加到aDatas.value中，就可以實現(xiàn)數(shù)據(jù)追加

針對寫靜態(tài)頁面很熟悉, 寫動態(tài)頁面很生疏, 其實, 寫動態(tài)頁面, 比寫靜態(tài)頁面, 簡單很多, 因為動態(tài)頁面, 需要使用vue提供的API, 這些API, 都是封裝好的, 調(diào)用起來很簡單

但是基礎的數(shù)組方法,增刪查改, 還是需要了解的, 因為這些基礎的數(shù)組方法, 都是API封裝的, 調(diào)用起來很簡單,如果不知道這些基礎的數(shù)組方法, 寫動態(tài)頁面, 就會很生疏,會很難寫

數(shù)組中常見實用方法, 如下所示

方法	說明
push	向數(shù)組末尾添加一個或多個元素
pop	刪除數(shù)組的最后一個元素
shift	刪除數(shù)組的第一個元素
unshift	向數(shù)組的開頭添加一個或多個元素
slice	截取數(shù)組, 返回一個新數(shù)組
splice	刪除數(shù)組中指定位置的元素, 并可在指定位置添加元素
concat	合并兩個或多個數(shù)組
join	把數(shù)組作為字符串返回
indexOf	查找元素在數(shù)組中的位置
lastIndexOf	查找元素在數(shù)組中的最后一個位置
forEach	遍歷數(shù)組
map	遍歷數(shù)組, 返回一個新數(shù)組
filter	過濾數(shù)組, 返回一個新數(shù)組
some	判斷數(shù)組中, 是否有元素滿足條件
every	判斷數(shù)組中, 所有元素是否都滿足條件
reduce	遍歷數(shù)組, 并返回一個值
reduceRight	遍歷數(shù)組, 并返回一個值
find	查找數(shù)組中, 第一個滿足條件的元素
findIndex	查找數(shù)組中, 第一個滿足條件的元素的位置
fill	用一個固定值填充數(shù)組
copyWithin	數(shù)組的一部分, 復制到同一數(shù)組中的另一個位置
includes	查找數(shù)組中, 是否包含某個元素
entries	返回數(shù)組中每個索引的鍵值對
keys	返回數(shù)組中每個索引的鍵
values	返回數(shù)組中每個索引的值
isArray	判斷是否為數(shù)組