axios, vue-resource进行ajax请求获取后端数据

一、通过axios完成异步请求：

1.安装

npm install axios --save

 

2.使用

2.1 方法一：将axios改写成Vue的原型属性

1.main.js

import axios from \'axios\'
import Vue from \'vue\'

Vue.prototype.$ajax = axios;

2.组件中使用：

//get 请求
this.$ajax.get(\'api/getNewsList\')
  .then(function (response) {
    console.log(response);
  })
  .catch(function (error) {
    console.log(error);
  });

//post 请求
this.$ajax.post(\'api/getNewsList\', {
    firstName: \'Fred\',
    lastName: \'Flintstone\'
  })
  .then(function (response) {
    console.log(response);
  })
  .catch(function (error) {
    console.log(error);
  });

 

3.vuex的store中使用

import Vue from \'Vue\'
import Vuex from \'vuex\'

import axios from \'axios\'

Vue.use(Vuex)
const store = new Vuex.Store({
  // 定义状态
  state: {
    user: {
      name: \'xiaoming\'
    }
  },
  actions: {
    // 封装一个 ajax 方法
    login (context) {
      axios.post(\'/api/getNewList\', state.user).then((res) => {
         console.log(res.data);
       }.catch((err) => {
         console.log(err);
       })
    }
  }
})

export default store 

2.2 结合vue-axios使用

1.main.js

import Vue from \'vue\'
import axios from \'axios\'
import VueAxios from \'vue-axios\'


Vue.use(VueAxios, axios);

2.组件中使用

methods: {
      this.axios.get(\'api/getNewsList\').then((response)=>{
        this.newsList=response.data.data;
      }).catch((response)=>{
        console.log(response);
      })
}

 

二、通过vue-rource完成异步请求(官方已不再维护，建议使用axios)

 其用法跟ajax用法差不多，也就是改变了一些语法格式。从获取路径到值的获取都是一样的，但是有一点是不同的就是ajax获取到的数据会自动转成json格式，而vue-resource获取到的数据要手动转成json格式。