Vue-resource

最新推荐文章于 2025-06-19 11:15:00 发布

xingxingxingge

最新推荐文章于 2025-06-19 11:15:00 发布

阅读量140

点赞数

CC 4.0 BY-SA版权

分类专栏： Vue

本文链接：https://blog.youkuaiyun.com/xingxingxingge/article/details/87547907

Vue 专栏收录该内容

19 篇文章

订阅专栏

一、vue-resource插件的安装

1.通过npm

npm install vue-resource

2.CDN

二、vue-resource用法

// global Vue object
Vue.http.get('/someUrl', [config]).then(successCallback, errorCallback);
Vue.http.post('/someUrl', [body], [config]).then(successCallback, errorCallback);

// in a Vue instance
this.$http.get('/someUrl', [config]).then(successCallback, errorCallback);
this.$http.post('/someUrl', [body], [config]).then(successCallback, errorCallback);

三、举个栗子

<script src=“https://cdn.jsdelivr.net/npm/vue-resource@1.5.1”></script>
<script>
var myapp = new Vue({
  el:"#app",
  data:{

  },
  methods:{
    getresource(){  
      //get请求--get(url, [config]))--,通过.then回调函数获得数据,返回的数据在result.body中, then 中第一个function表示成功的回调,第二个function表示失败的回调,失败的回调是可选的,可以不传
      this.$http.get("http-test.php").then(
      function(result){
        console.log(result.body)
      },function(err){
        console.log(err)
      })
    },
    postresource(){
      //post请求--post(url, [body], [config])-- 第二个参数是发送到服务端的数据不能省略---手动发起的post请求默认没有表单格式,所以有的服务起处理不了,通过设置第三个参数emulateJSON:true 是设置提交的内容类型为普通表单数据格式
      this.$http.post("http-test.php",{},{emulateJSON:true}).then(
      function(result){
        console.log(result.body)
      },function(err){
        console.log(err)
      })
    }
  }
})
</script>