vue 中如何支援非同步請求

1、vue 支援開發者引入 jquery 使用 $.ajax()

1、首先，在 package.json 中新增 jQuery，然後 npm install

"dependencies": {
    "jquery": "^3.2.1",
  },

2、在 webpack.config.js ( 這邊用的 vue-cli-simple 腳手架 )

 // 增加一個plugins
  plugins: [
      new webpack.ProvidePlugin({
          $: "jquery",
          jQuery: "jquery"
 

      })
   ],

3、最後，在全域性（main.js）中去引用

import $ from 'jquery'   

2、vue.resource（ 2.0後不再更新）

1、 npm 安裝 vue-resource

 npm install vue-resource

2、 main.js 中引入

 import VueResource from 'vue-resource'

  Vue.use(VueResource)

3、使用

this.$http.get('../src/data/a.txt')
    .then(function(res){
 

              alert(res.data);
          },function(){
              alert('false')
          });

3、推薦使用 axios

url :絕對路徑

1、npm 安裝

npm install axios

2、元件 中引入

import Vue from 'vue'
import Axios from 'axios'

3、使用

axios.get('url')
     .then(function(res){
    alert(res);
     })
     .catch
 
(function(err){
    alert(err);
     })

axios.post('/user', {
    firstName: 'Fred',
    lastName: 'Flintstone'
  })
  .then(function (response) {
    console.log(response);
  })
  .catch(function (error) {
    console.log(error);
  });

axios({
  method: 'post',
  url: '/user/12345',
  data: {
    firstName: 'Fred',
    lastName: 'Flintstone'
  }
});

 mounted: function() {
     this.$nextTick(function () {
    //先定義一個全域性_this
        var _this=this;
        axios.get('../../src/data/a.txt')
             .then(function(res){
                  _this.msg=res.data;
                  console.log(_this.msg)
             })
             .catch(function(err){
                  alert(err);
             })
     })
}