zoukankan      html  css  js  c++  java
  • Vue 中使用Ajax请求

    Vue 项目中常用的 2 个 ajax 库

    (一)vue-resource

    vue 插件, 非官方库,vue1.x 使用广泛

    vue-resource 的使用

    在线文档   https://github.com/pagekit/vue-resource/blob/develop/docs/http.md

    下载

    npm install vue-resource --save

    编码

    // 引入模块 ,注意应该在入口文件main.js中引入和声明

    import VueResource from 'vue-resource'

    // 声明使用

    Vue.use(VueResource)  //内部会给vm对象和组件对象添加一个属性:$http

    // 通过 vue组件对象发送 ajax 请求(发送get请求)

    this.$http.get('/someUrl?foo=bar').then(

    response=>{//successcallback

    console.log(response.data)//返回结果数据

    },

    response=>{//errorcallback

    console.log(response.statusText)//错误信息
    })

     // 通过 vue组件对象发送 ajax 请求(发送post请求)

    this.$http.post('/someUrl', {foo: 'bar'}).then(

    response=>{//successcallback

    console.log(response.data)//返回结果数据

    },

    response=>{//errorcallback

    console.log(response.statusText)//错误信息
    })

     

    (二)axios

    通用的 ajax 请求库, 官方推荐,vue2.x 使用广泛

    axios 的使用

    在线文档   https://github.com/axios/axios/blob/master/README.md

    下载

    npm install axios --save

    编码

    // 引入模块,无需声明,在组件中引入

    import axios from 'axios'
    // 发送 ajax 请求(发送get请求)

    axios.get('/someUrl?foo=bar') .then(   

    response=>{//successcallback

    console.log(response.data)// 得到返回结果数据

    }) .catch(

    error=>{

    console.log(error.message)//错误信息

    })

    // 发送 ajax 请求(发送post请求)

    axios.post('/someUrl', {foo'bar'}) .then(   

    response=>{//successcallback

    console.log(response.data)// 得到返回结果数据

    }) .catch(

    error=>{

    console.log(error.message)//错误信息

    })

  • 相关阅读:
    8.25
    8.24
    8.23
    8.22
    8.21
    8.20
    8.19
    8.18
    8.17
    8.16
  • 原文地址:https://www.cnblogs.com/adongyo/p/11260943.html
Copyright © 2011-2022 走看看