VUE-请求数据的三种插件

最新推荐文章于 2025-05-08 14:19:03 发布

Aro_HAN

最新推荐文章于 2025-05-08 14:19:03 发布

阅读量1.5k

点赞数

CC 4.0 BY-SA版权

分类专栏： VUE

本文链接：https://blog.youkuaiyun.com/Aro_HAN/article/details/80556895

VUE 专栏收录该内容

7 篇文章

订阅专栏

本文介绍了如何在Vue项目中利用vue-resource、axios及fetch-jsonp等库进行HTTP请求的方法。详细讲解了各库的安装步骤及使用方式，并通过具体实例展示了如何发起GET和POST请求。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<template>
  <div>
    <h2>请求组件</h2>
    <button @click="getData()">请求数据</button>
  </div>
</template>

<script>
  /*
  请求数据的模板
    vue-resource 官方提供的vue 的一个插件
    1.安装 npm install vue-resource --save
    2.在main.js中注册该模块
      import VueResource from 'vue-resource'
      Vue.use(VueResource);
    3.在组件中直接使用
      this.$http.get(地址).then（function(success_response){},finction(err_response){})

    axios
    1.安装
      npm install axios --save
    2.哪里用哪里引用
      import axios from 'axios';
        axios.get('/user?ID=12345')
          .then(function (response) {
            console.log(response);
          })
          .catch(function (error) {
            console.log(error);
          });
       或者
       axios.post('/user', {
          firstName: 'Fred',
          lastName: 'Flintstone'
        })
        .then(function (response) {
          console.log(response);
        })
        .catch(function (error) {
          console.log(error);
        });

    fetch-jsonp
    与axios一致
   */
    export default {
        name: "qingqiu",
      methods:{
          getData(){

            var _this=this;
            var api='http://www.phcnegap100.com/appapi/php?a=getProtalList&catid=20&page=1'
            this.$http.get(api).then(response => {
              //根据服务器相应的数据改变modle数据时，因闭包原因要使用上面的_this去改变
              // get body data
              console.log("请求成功");
              console.log(response);

            }, response => {
              // error callback
              console.log("请求失败");
              console.log(response);
            });
          }
      }
    }
</script>

<style scoped>

</style>