Vuejs2.0之異步跨域請求

　　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

稍等片刻，便可完成。如今咱們來跑一下用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>

結果如圖，咱們傳的值'HelloAxiosPost'也打印出來了。有人可能會問

這裏問什麼要這麼寫，官方文檔是這麼寫的

親測這樣寫不行。有興趣的朋友能夠自行測試。那咱們再來講說爲什麼是那個字符串

查看chorme F12查看一下網絡請求，發現咱們請求的值就是Form Data。這樣咱們就能夠拼接參數請求了，多參數格式爲param1=value1&param2=value2。

好了，至此本文結束了(第一次發文章，但願你們多多支持，嘴下留情，各位老鳥請無視。)