詳解Vuejs2.0之異步跨域請(qǐng)求
Vuejs由1.0更新到了2.0版本。HTTP請(qǐng)求官方也從推薦使用Vue-Resoure變?yōu)榱薬xios。接下來(lái)我們來(lái)簡(jiǎn)單地用axios進(jìn)行一下異步請(qǐng)求。(閱讀本文作者默認(rèn)讀者具有使用npm命令的能力,以及具備ES6的能力,以及等等。。。)
首先我們來(lái)安裝Vue-Cli開發(fā)模板(這個(gè)模板可以快速生成vuejs的運(yùn)行配置環(huán)境,可以使新手快速免除配置搭建出運(yùn)行界面),這里我使用cnpm命令,請(qǐng)自行百度配置。
打開命令窗口:
cnpm install -g vue-cli
等待片刻,即可安裝完畢。
然后新建一個(gè)Vuejs項(xiàng)目
vue init webpack axiosproject
切換到項(xiàng)目目錄,執(zhí)行命令:
cnpm install axios --save --dev
最后執(zhí)行命令安裝項(xiàng)目所需依賴:
cnpm install
稍等片刻,即可完成?,F(xiàn)在我們來(lái)跑一下用Vue-Cli搭建出來(lái)的項(xiàng)目,執(zhí)行命令:
cnpm run dev
自動(dòng)瀏覽器自動(dòng)彈出這個(gè)界面就說(shuō)明上面的步驟我們成功實(shí)現(xiàn)了。
接下來(lái)我才來(lái)真正的開始用編輯器來(lái)使用axios。打開VS Code(編輯器請(qǐng)自行用自己喜歡的,本人軟粉,所以首選VS Code),我們來(lái)改造一下main.js入口文件
import Vue from 'vue' import App from './App' import axios from 'axios' Vue.prototype.$http = axios; /* eslint-disable no-new */ new Vue({ el: '#app', template: '<App/>', components: { App } })
我們引用了axios,再將axios這個(gè)對(duì)象clone到Vue的$http這個(gè)屬性上,以后我們就可以在其他組件里使用axios來(lái)進(jìn)行 異步請(qǐng)求了。不多說(shuō)了,我們最終的結(jié)果就是將請(qǐng)求的數(shù)據(jù)打印到瀏覽器控制臺(tái)就算成功了。我使用的接口是本地模擬的,不過(guò)區(qū)別不大。這里特別說(shuō)明一下關(guān)于跨域,跨域需要配置返回的請(qǐng)求頭,在asp.core做如下處理,其他后端配置可以參照;
這是Get接口返回在瀏覽器返回結(jié)果:
好,接下來(lái)我們?cè)贖ello.vue這個(gè)組件里寫一些腳本
<script> export default { name: 'hello', data () { return { msg: 'Welcome to Your Vue.js App' } }, created:function(){ this.HelloAxios(); }, methods:{ HelloAxios(){ this.$http.get('http://localhost:54903/api/values').then(m=>console.log(m.data)); } } } </script>
至此我們完成了Get請(qǐng)求,接下來(lái),我們完成Post請(qǐng)求
<script> export default { name: 'hello', data () { return { msg: 'Welcome to Your Vue.js App' } }, created:function(){ this.HelloAxios(); this.HelloAxiosPost('HelloAxiosPost'); }, methods:{ HelloAxios(){ this.$http.get('http://localhost:54903/api/values').then(m=>console.log(m.data)); }, HelloAxiosPost(val){ let str = 'value='+val this.$http.post('http://localhost:54903/api/values',str).then(m=>console.log(m.data)); } } } </script>
結(jié)果如圖,我們傳的值'HelloAxiosPost'也打印出來(lái)了。有人可能會(huì)問(wèn)
這里問(wèn)什么要這么寫,官方文檔是這么寫的
親測(cè)這樣寫不行。有興趣的朋友可以自行測(cè)試。那我們?cè)賮?lái)說(shuō)說(shuō)為何是那個(gè)字符串
查看chorme F12查看一下網(wǎng)絡(luò)請(qǐng)求,發(fā)現(xiàn)我們請(qǐng)求的值就是Form Data。這樣我們就可以拼接參數(shù)請(qǐng)求了,多參數(shù)格式為param1=value1¶m2=value2。
好了,至此本文結(jié)束了,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
- VUE異步更新DOM - 用$nextTick解決DOM視圖的問(wèn)題
- 淺談Vuejs中nextTick()異步更新隊(duì)列源碼解析
- vue在使用ECharts時(shí)的異步更新和數(shù)據(jù)加載詳解
- 詳解從Vue.js源碼看異步更新DOM策略及nextTick
- vue 解決異步數(shù)據(jù)更新問(wèn)題
- 詳解vue2父組件傳遞props異步數(shù)據(jù)到子組件的問(wèn)題
- Vue form 表單提交+ajax異步請(qǐng)求+分頁(yè)效果
- vue異步axios獲取的數(shù)據(jù)渲染到頁(yè)面的方法
- vue中promise的使用及異步請(qǐng)求數(shù)據(jù)的方法
- 詳解Vue的異步更新實(shí)現(xiàn)原理
相關(guān)文章
vue-cli 項(xiàng)目打包完成后運(yùn)行文件路徑報(bào)錯(cuò)問(wèn)題
這篇文章主要介紹了vue-cli 項(xiàng)目打包完成后運(yùn)行文件路徑報(bào)錯(cuò)問(wèn)題,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-07-07學(xué)習(xí)Vue框架中必掌握的重點(diǎn)知識(shí)
這篇文章主要介紹了學(xué)習(xí)Vue中必掌握的重點(diǎn)知識(shí),想了解vue的同學(xué)可以參考下2021-04-04Vue中使用Element UI的Table組件實(shí)現(xiàn)嵌套表格功能
這篇文章主要介紹了Vue中使用Element UI的Table組件實(shí)現(xiàn)嵌套表格功能,演示如何在Vue中使用Element UI的Table組件實(shí)現(xiàn)嵌套表格,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友參考下吧2024-01-01element-ui循環(huán)顯示radio控件信息的方法
今天小編就為大家分享一篇element-ui循環(huán)顯示radio控件信息的方法,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-08-08vue.config.js使用代理配置真實(shí)請(qǐng)求url方式
這篇文章主要介紹了vue.config.js使用代理配置真實(shí)請(qǐng)求url方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-10-10vue關(guān)于頁(yè)面刷新的幾個(gè)方式解讀
這篇文章主要介紹了vue關(guān)于頁(yè)面刷新的幾個(gè)方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-05-05vue 使用rules對(duì)表單字段進(jìn)行校驗(yàn)的步驟
這篇文章主要介紹了vue 使用rules對(duì)表單字段進(jìn)行校驗(yàn)的步驟,幫助大家更好的理解和使用vue,感興趣的朋友可以了解下2020-12-12