Vuejs2.0中怎么實(shí)現(xiàn)一個(gè)異步跨域請(qǐng)求

Vuejs2.0中怎么實(shí)現(xiàn)一個(gè)異步跨域請(qǐng)求，針對(duì)這個(gè)問(wèn)題，這篇文章詳細(xì)介紹了相對(duì)應(yīng)的分析和解答，希望可以幫助更多想解決這個(gè)問(wèn)題的小伙伴找到更簡(jiǎn)單易行的方法。

首先我們來(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&param2=value2。

關(guān)于Vuejs2.0中怎么實(shí)現(xiàn)一個(gè)異步跨域請(qǐng)求問(wèn)題的解答就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的幫助，如果你還有很多疑惑沒(méi)有解開，可以關(guān)注億速云行業(yè)資訊頻道了解更多相關(guān)知識(shí)。