詳解Vuejs2.0之異步跨域請求

2019-11-19 16:47:11

字體：大中小

來源：轉載

供稿：網友

Vuejs由1.0更新到了2.0版本。HTTP請求官方也從推薦使用Vue-Resoure變為了axios。接下來我們來簡單地用axios進行一下異步請求。（閱讀本文作者默認讀者具有使用npm命令的能力，以及具備ES6的能力，以及等等。。。）

首先我們來安裝Vue-Cli開發模板(這個模板可以快速生成vuejs的運行配置環境,可以使新手快速免除配置搭建出運行界面)，這里我使用cnpm命令，請自行百度配置。

打開命令窗口:

cnpm install -g vue-cli

等待片刻，即可安裝完畢。

然后新建一個Vuejs項目

vue init webpack axiosproject

切換到項目目錄，執行命令:

cnpm install axios --save --dev

最后執行命令安裝項目所需依賴:

cnpm install

稍等片刻，即可完成?，F在我們來跑一下用Vue-Cli搭建出來的項目，執行命令:

cnpm run dev

自動瀏覽器自動彈出這個界面就說明上面的步驟我們成功實現了。

接下來我才來真正的開始用編輯器來使用axios。打開VS Code(編輯器請自行用自己喜歡的，本人軟粉，所以首選VS Code)，我們來改造一下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這個對象clone到Vue的$http這個屬性上,以后我們就可以在其他組件里使用axios來進行異步請求了。不多說了，我們最終的結果就是將請求的數據打印到瀏覽器控制臺就算成功了。我使用的接口是本地模擬的，不過區別不大。這里特別說明一下關于跨域，跨域需要配置返回的請求頭，在asp.core做如下處理,其他后端配置可以參照；

這是Get接口返回在瀏覽器返回結果:

好，接下來我們在Hello.vue這個組件里寫一些腳本

<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請求，接下來，我們完成Post請求

<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>