Vue的異步渲染axios問題怎么解決

本文小編為大家詳細(xì)介紹“Vue的異步渲染axios問題怎么解決”，內(nèi)容詳細(xì)，步驟清晰，細(xì)節(jié)處理妥當(dāng)，希望這篇“Vue的異步渲染axios問題怎么解決”文章能幫助大家解決疑惑，下面跟著小編的思路慢慢深入，一起來學(xué)習(xí)新知識吧。

Vue異步渲染axios

首先我們要知道axios不是vue里面的。

axios是一個基于Promise的，發(fā)送http請求的一個工具庫，并不是vue中的第三方插件，使用時不能通過“Vue.use()”安裝插件，需要在原型上進(jìn)行綁定。

axios異步跟jquery中ajax其實是一樣的，功能相同，不過獲取到數(shù)據(jù)以后渲染的難易程度不同讓axios更加突出，jquery需要不停的操作dom元素進(jìn)行渲染，而axios利用Vue進(jìn)行渲染，其中的方便就大幅度展現(xiàn)出來了。

首先用Springboot實現(xiàn)一下簡單的axios異步請求以及渲染。

點擊事件觸發(fā)，將獲取的數(shù)據(jù)進(jìn)行渲染。

<div id="box"> 
     <span>{{name}}</span>
    <input type="button" v-on:click="ss">
</div>
 
<script type="text/javascript">
    new Vue({
        el:"#box",
        data:{
            name:'李佳琪'
        },
        methods:{
            ss:function (){
                axios.get("/boot1/123").then(response=>(this.name=response.data))
            }
        }
    })
</script>

這里在簡單說一下，thymeleaf中的路徑引用

引入外部文件的寫法。

 <link rel="stylesheet" type="text/css" th:href="@{/css/ss.css}" rel="external nofollow" />
    <script th:src="@{/js/vue.js}" type="text/javascript" charset="utf-8"></script>
    <script th:src="@{https://unpkg.com/axios/dist/axios.min.js}"></script>

Vue axios發(fā)起異步請求

axios是vue中專門用來發(fā)起異步請求的庫，可以理解為python中的requests庫，java中的rest-assured庫。

1.安裝axios

cnpm install axios -S

2.使用

• axios.get(url) :發(fā)起請求

• .then():請求成功需要做的事

• .catch():請求失敗需要做的事

要修改data()中的屬性，此處用箭頭函數(shù)來指定this對象，否則，this.xxx修改的是.then()中的function對象。

1.往往我們可以把這類api的請求都封裝到一個api.js文件中：

2.使用的地方導(dǎo)入：

真實項目中的使用

1.封裝api.js,將axios請求的多個接口封裝好

2.在組件的created或者mounted或者methods中向后端發(fā)起axios請求，得到數(shù)據(jù)

3.將得到的數(shù)據(jù)賦值給組件的data()中的屬性，組件再在模版<template></template>中渲染，展示給前端。

讀到這里，這篇“Vue的異步渲染axios問題怎么解決”文章已經(jīng)介紹完畢，想要掌握這篇文章的知識點還需要大家自己動手實踐使用過才能領(lǐng)會，如果想了解更多相關(guān)內(nèi)容的文章，歡迎關(guān)注億速云行業(yè)資訊頻道。