zoukankan      html  css  js  c++  java
  • 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格式。

     

  • 相关阅读:
    springcloud -- sleuth+zipkin整合rabbitMQ详解
    docker 更新后出现 error during connect
    springcloud --- spring cloud sleuth和zipkin日志管理(spring boot 2.18)
    kotlin系列文章 --- 3.条件控制
    kotlin -- 可见性修饰符
    kotlin系列文章 --- 2.基本语法
    kotlin系列文章 --- 1.初识kotlin
    oracle索引失效总结
    mysql常用命令行操作
    JavaFX简介和Scene Builder工具的安装使用简易教程
  • 原文地址:https://www.cnblogs.com/ceceliahappycoding/p/10504490.html
Copyright © 2011-2022 走看看