vue使用axios非同步請求後端資料的使用
Vue 原本有一個官方推薦的 ajax 外掛 vue-resource,但是自從 Vue 更新到 2.0 之後,官方就不再更新維護 vue-resource,並推薦axios,
目前主流的 Vue 專案,都選擇 axios 來完成 ajax 請求。
使用方法:
方案一:改原型
1.安裝
npm install axios --save-dev
2.使用:
main.js中:
import axios from
"axios"
Vue.prototype.$ajax=axios
將 axios 改寫為 Vue 的原型屬性,這樣其它的元件中,方可以使用 axios 命令的,(或者在要引用的元件頁直接 import axios from
"axios"
)3.方法中可以使用:
this.$ajax({
method:'get',
url:url,
data:data
}).then(function (res) {
console.log(res)
}).catch(function (err) {
console.log(err)
})
本地測試發現,url介面路徑地址,用絕對路徑更好點。相對地址有時候抓取報錯。原因未知。
關於get,post方法:繞坑參考:http://blog.csdn.net/milli236/article/details/78053711
方案二:在 Vuex 中封裝
之前的文章中用到過 Vuex 的 mutations,從結果上看,mutations 類似於事件,用於提交 Vuex 中的狀態 state
action 和 mutations 也很類似,主要的區別在於,action 可以包含非同步操作,而且可以通過 action 來提交 mutations
另外還有一個重要的區別:
mutations 有一個固有引數 state,接收的是 Vuex 中的 state 物件
action 也有一個固有引數 context,但是 context 是 state 的父級,包含 state、getters
Vuex 的倉庫是 store.js,將 axios 引入,並在 action 新增新的方法
1234567891011121314151617181920212223242526272829303132 | // store.js import Vue from 'Vue' import Vuex from 'vuex' // 引入 axios import axios from 'axios' Vue.use(Vuex) const store = new Vuex.Store({ // 定義狀態 state: { test01: { name: 'Wise Wrong' }, test02: { tell: '12312345678' } }, actions: { // 封裝一個 ajax 方法 saveForm (context) { axios({ method: 'post' , url: '/user' , data: context.state.test02 }) } } }) export default store |
注意:即使已經在 main.js 中引入了 axios,並改寫了原型鏈,也無法在 store.js 中直接使用 $ajax 命令
換言之,這兩種方案是相互獨立的
在元件中傳送請求的時候,需要使用 this.$store.dispatch 來分發
?12345 | methods: { submitForm () { this .$store.dispatch( 'saveForm' ) } } |
submitForm 是繫結在元件上的一個方法,將觸發 saveForm,從而通過 axios 向伺服器傳送請求
附:配置 axios
上面封裝的方法中,使用了 axios 的三個配置項,實際上只有 url 是必須的。
為了方便,axios 還為每種方法起了別名,比如上面的 saveForm 方法等價於:
?1 | axios.post('/user', context.state.test02) |
完整的請求還應當包括 .then 和 .catch
?123456 | .then(function(res){ console.log(res) }) .catch(function(err){ console.log(err) }) |
當請求成功時,會執行 .then,否則執行 .catch
原文連結:http://www.cnblogs.com/wisewrong/p/6402183.html
相關推薦
vue使用axios非同步請求後端資料的使用
Vue 原本有一個官方推薦的 ajax 外掛 vue-resource,但是自從 Vue 更新到 2.0 之後,官方就不再更新維護 vue-resource,並推薦axios,目前主流的 Vue 專案,都選擇 axios 來完成 ajax 請求。使用方法:方案一:改原型1.安
前端請求後端,後端查詢完畢傳到前端 ,用layui 將 資料分頁
前端:我用的是layui框架的分頁 js 檔案 layui.config({base : "script/" }).use(['form','layer','jquery','laypage'],function(){var form = layui.form(),layer = paren
Android請求獲取Java後端資料,登入介面例子
最近做了個Android請求獲取Java後端資料的例子,簡單實現了一下。先上個登入介面圖: 主要實現:java後端的程式碼 + Android的程式碼1、java後端(1)、先創個User類import net.sf.json.JSONObject; public cla
request payload資料請求方式(原生AJAX POST請求)後端獲取引數錯誤
首先我先說明一下request payload請求時怎麼發生的 我們如果從一個from中去提交post請求時,資料是以Form Data方式去提交的,即:提交的資料被封裝在一個叫Form Data的請
Echarts非同步載入後端介面返回的Json資料生成圖表
一.Echarts 是一款很好用的前端報表製作工具,根據官網的開發文件,我們可以匯入假資料製作各種分析的圖表.詳情看官網:Echarts官網案例.但是如果要根據實際情況匯入真實的資料呢?怎麼處理? 操作的常規思路是這樣的: 1.根據需要的業務邏輯編
Java——定時請求後端介面資料傳送RabbitMQ訊息佇列到指定MQ伺服器
RabbitMQ入門參考部落格:http://m.blog.csdn.net/article/details?id=50487028(內含介紹、環境配置及基本實現說明) RabbitMQ官方文件參考,傳送Topic exchange佇列:http://www.rabbitm
一次有趣的ant-design與後端資料互動的使用
最近有個需求是新聞時間排序與點選量排序,資料庫中儲存的新聞是按照時間順序排序的,從後臺資料中取出資料,在前端進行頁面展示即可。 我用到了ant-design中的Tabs切換頁,樣式大概如下圖。 其實這個專案裡面最令我欣喜的是reducer中介軟體的封裝,無需通過fetch請求資料這些,而是使用另外的封裝中介
AJAX請求後頁面資料未重新整理問題
這段時間因為做畢設,涉及到AJAX的問題比較多,今天的問題就是一個。中所周知,ajax最大的特點就是區域性重新整理,可以在不更新整個頁面的情況下重新整理區域性資料,但是,有時候這種優點也會成為一種優點,多說無益,直接上圖 首先來看未操作之前的頁面 之後我要開始添加了,點選按鈕 新
在 Angular6 中使用 HTTP 請求服務端資料的步驟詳解
第一步 準備好api介面地址, 例如 https://api.example.com/api/ 第二步 在根元件 app.components.ts 中引入 HttpClientModule 模組。 ? 1 2 3 4 5 6 7
Spring MVC利用Hibernate Validator實現後端資料校驗
吐槽一下,網上坑好多啊!不過採坑才能學習,寫bug能力-1。 JSR 303、JSR 349與Bean Validator 籠統來說,就是Java規定了一套關於驗證器的API,
解決請求介面要以JSON格式請求後端的問題
一開始就跟平常一樣寫好介面就給前端。發現老是500方法進不來發現是請求頭Content-Type的問題導致的 相關知識: (1):我們預設使用的表單和Jquery預設的Ajax請求,Content-Type都是預設採用:application / x-www-form-urlenc
Atitit 面試技術點最小化問題法總結 目錄 1. Web 前端 1 1.1. Jq 常用操作哪些?? 1 1.2. 查詢後如何繫結後端資料到表格 2 1.3. 提交後怎麼接受表單資料 2 2.
Atitit 面試技術點最小化問題法總結 目錄 1. Web 前端 1 1.1. Jq 常用操作哪些?? 1 1.2. 查詢後如何繫結後端資料到表格 2 1.3. 提交後怎麼接受表單資料 2 2. Mvc Springmvc 2 2.1
jQuery Ajax 非同步請求data引數資料格式的六種方法
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> </head> <body>
在 Angular6 中使用 HTTP 請求服務端資料
第一步 準備好api介面地址, 例如 https://api.example.com/api/ 第二步 在根元件 app.module.ts 中引入 HttpClientModule 模組。 // app.module.ts import {HttpClientMo
【SSM】【4】前端後端資料流轉
前後端資料流轉圖: 業務流轉圖 前端控制器接受使用者請求響應 doJsonRequest("/ursuser/login.json", json, function (data) { if (getUrlParam
@Validation校驗後端資料
一、@Validation的簡單運用 1.引入依賴pom.xml <!-- 資料校驗依賴 hibernate validatorjar包--> <dependency> <groupId>javax.validation</gr
解決後端資料遍歷 前端標籤新增事件
//點選 function getMaterial(x){ var chuangTong = $("#changtong").val(); //點選傳統和注塑和cpu一體的值 var name=x; //材質的值 $
web前端後端資料的互動方式總結
做web開發,很重要的一個環節就是前後臺的資料的互動,資料從頁面提交到contoller層,資料從controler層傳送到jsp頁面來顯示。這2個過程中資料具體是如何來傳送的,是本節講解的內容。 首先說一下資料如何從後臺的contorller層傳送到頁面jsp上
jquery的ajax調取後端資料成功卻渲染失敗的原因
獲取後端資料後,進行前端的頁面渲染,資料讀到了,渲染卻失敗了,經過無數次排查,發現 了問題: 主要問題就是id的唯一性 $("#id")一般可以獲得相應的物件,但是如果此時頁面有多個同樣的id,jquery就不行了,肯定不能查詢到相應的物件 綜述來說,如果渲染不成功,首先
APP後端資料介面注意事項
2014年,移動APP的熱度絲毫沒有減退,並沒有像桌面軟體被WEB網站那樣所取代, 不但如此,越來越多的傳統應用、網站也都開始製作自己的移動APP,也就是我們常說的IOS客戶端、android客戶端。 這彷彿又回到了多年前的CS架構,那時候我們用VB、VC、Delphi在Windows平臺上快速開發各種應用