简单了解Vue的异步请求,axios-0.18.0.js插件实现异步
生活随笔
收集整理的這篇文章主要介紹了
简单了解Vue的异步请求,axios-0.18.0.js插件实现异步
小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.
Vue的異步請(qǐng)求
Vue 異步操作
在 Vue 中發(fā)送異步請(qǐng)求，本質(zhì)上還是 AJAX。我們可以使用 axios 這個(gè)插件來簡(jiǎn)化操作！
使用步驟
案列結(jié)構(gòu)
前端代碼(test.html)
<!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()">發(fā)起請(qǐng)求</button></div> </body> <script>new Vue({el:"#div",data:{name:"張三"},methods:{//上面綁定了點(diǎn)擊事件,執(zhí)行異步請(qǐng)求send(){// GET方式請(qǐng)求// axios.get("testServlet?name=" + this.name)// .then(resp => {// alert(resp.data);// })// .catch(error => {// alert(error);// })/*? 在 Vue 中發(fā)送異步請(qǐng)求，本質(zhì)上還是 AJAX。我們可以使用 axios 這個(gè)插件來簡(jiǎn)化操作！? 使用步驟1. 引入 axios 核心 js 文件。2. 調(diào)用 axios 對(duì)象的方法來發(fā)起異步請(qǐng)求。3. 調(diào)用 axios 對(duì)象的方法來處理響應(yīng)的數(shù)據(jù)。*/// POST方式請(qǐng)求,鏈?zhǔn)骄幊?/span>axios.post("testServlet","name="+this.name)//請(qǐng)求后回調(diào)函數(shù)發(fā)起請(qǐng)求后,然后呢//請(qǐng)求成功后的回調(diào)函數(shù)，通過response獲取響應(yīng)的數(shù)據(jù)/*箭頭函數(shù):特點(diǎn):它能夠使用上下文的this*/.then(resp => {alert(resp.data);})//請(qǐng)求失敗后的回調(diào)函數(shù)，通過error獲取錯(cuò)誤信息.catch(error => {alert(error);})//第二種模擬詳細(xì)流程使用的餓了么ui//說明表單校驗(yàn)通過,發(fā)生異步請(qǐng)求//對(duì)響應(yīng)的結(jié)果,axios對(duì)后端返回的結(jié)果進(jìn)行了封裝,res.data,這個(gè)data就是返回的json數(shù)據(jù),,,也可以從res中獲取響應(yīng)碼等數(shù)據(jù)axios.post("/checkItem/edit.do",this.formData).then((res)=>{//提交后關(guān)閉編輯窗口this.dialogFormVisible4Edit=false;//對(duì)返回的數(shù)據(jù)進(jìn)行判斷是否成功if(res.data.flag){//說明成功this.$message({message:res.data.message,type:"success"})}else {//說明失敗this.$message.error(res.data.message);return false;}}).finally(()=>{//finally()方法,表示異步提交后,無論成功還是失敗,都會(huì)執(zhí)行的方法//無論成功還是失敗,都調(diào)用表單查詢方法this.findPage();}).catch((res)=>{//異步請(qǐng)求失敗,會(huì)走到catch這個(gè)方法this.$message.error("異步請(qǐng)求失敗~~~");}) //鏈?zhǔn)骄幊?/span>// axios.get("testServlet?name="+this.name).then(resp =>{alert(resp.data)}).catch(error=>{alert(error)});}}}); </script> </html>后端代碼(Servlet)
package com.fs;import javax.servlet.ServletException; import javax.servlet.annotation.WebServlet; import javax.servlet.http.HttpServlet; import javax.servlet.http.HttpServletRequest; import javax.servlet.http.HttpServletResponse; import java.io.IOException; @WebServlet("/testServlet") public class TestServlet extends HttpServlet {@Overrideprotected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {//設(shè)置請(qǐng)求和響應(yīng)的編碼req.setCharacterEncoding("UTF-8");resp.setContentType("text/html;charset=UTF-8");//獲取請(qǐng)求參數(shù)String name = req.getParameter("name");System.out.println(name);//響應(yīng)客戶端resp.getWriter().write("請(qǐng)求成功");}@Overrideprotected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {this.doGet(req,resp);} }圖解異步代碼
總結(jié)
以上是生活随笔為你收集整理的简单了解Vue的异步请求,axios-0.18.0.js插件实现异步的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 简单了解Vue的自定义组件与生命周期
- 下一篇： 前端学习笔记之-VUE框架学习-Vue核