Vue入門（四）Vue非同步操作Axios

努力--坚持發表於2024-09-01
Vue非同步iOS

　　一、Vue非同步操作


在Vue中傳送非同步請求，本質上還是AJAX。我們可以使用axios這個外掛來簡化操作！

- 使用步驟
1.引入axios核心js檔案。
2.呼叫axios物件的方法來發起非同步請求。
3.呼叫axios物件的方法來處理響應的資料。

- axios常用方法

get：發起Get方式請求

post：發起Post方式請求

then：請求成功後的回撥函式，透過response獲取相應資料

catch：請求失敗後的回撥函式，透過error獲取錯誤資訊

　　二、Vue非同步操作 Axios示例


Axios傳送非同步get/Post請求示例程式碼：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>非同步操作</title>
    <script src="js/vue.js"></script>
    <script src="js/axios-0.18.0.js"></script>
</head>
<body>
    <div id="div">
        {{name}}
        <button @click="send()">發起非同步請求</button>
    </div>
</body>
<script>
    new Vue({
        el:"#div",
        data:{
            name:"張三"
        },
        methods:{
            send(){
                // GET方式請求
                // axios.get("testServlet?name=" + this.name)
                //     .then(resp => {
                //         alert(resp.data);
                //     })
                //     .catch(error => {
                //         alert(error);
                //     })
 
                // POST方式請求
                axios.post("testServlet","name="+this.name)
                    .then(resp => {
                        alert(resp.data);
                    })
                    .catch(error => {
                        alert(error);
                    })
            }
        }
    });
</script>
</html>

相關文章