前端框架Vue（7）—— vue.resource 、axios、ajax 異步通訊

vue 中如何支持異步請求

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

一、首先，在 package.json 中添加 jQuery，而後 npm install

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

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

// 增長一個plugins
  plugins: [
      new webpack.ProvidePlugin({
          $: "jquery",
          jQuery: "jquery"
      })
   ],

三、最後，在全局（main.js）中去引用

import $ from 'jquery'

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

一、 npm 安裝 vue-resource

npm install vue-resource

二、 main.js 中引入

import VueResource from 'vue-resource'

Vue.use(VueResource)

三、使用

this.$http.get('../src/data/a.txt')
    .then(function(res){
              alert(res.data);
          },function(){
              alert('false')
          });

三、推薦使用 axios

github 地址：https://github.com/mzabriskie...

url :絕對路徑

一、npm 安裝

npm install axios

二、組件 中引入

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

三、使用

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);
             })
     })
}