vue请求数据的三种方式


Posted in Javascript onMarch 04, 2020

请求数据的方式:

  • vue-resource 官方提供的 vue的一个插件
  • axios
  • fetch-jsonp

一,vue-resource请求数据

介绍:vue-resource请求数据方式是官方提供的一个插件

使用步骤:

1、安装vue-resource模块

cnpm install vue-resource --save

加--save是为了在package.json中引用,表示在生产环境中使用。因为我们在日常开发中,如果我们要打包代码给其他人或者上传到github,又或者要发布代码时,package.json就是安装所需要的包。如果只在开发环境中使用,则只需要--save-dev,有一些只在开发环境中用,有一些要在生产环境中用。

2、在 main.js 引入 vue-resource

import VueResource from 'vue-resource';
Vue.use(VueResource);

3、在组件里面直接使用

this.$http.get(地址).then(function(){

})

注意:this.$http.get()等等的各种http请求都是继承promise的。promise是异步的请求;其次,.then箭头函数里的this代表的是上下文。根据箭头函数this的定义,只在函数定义时就已经赋值可知,this,指代的是定义函数的对象,在vue中对象就是methods当前页面。所以this指导的是data里面的数据。如果想要获取包裹函数外函数的数据,即闭包的概念。实现方法就是在外层函数加一个var that =  this;将外层的this先储存到that中。

实例:

Info.vue

<template>
  <div id="info">
    <button @click="getData">获取数据</button>
    <ul>
      <li v-for="(item,index) in list" v-bind:key="index">
        {{item.title}}
      </li>
    </ul>
  </div>
</template>

<script>
  export default {
    name: "Info",
    data() {
      return {
        list: []
      }
    },
    methods: {
      getData: function () {
        let api = 'http://www.phonegap100.com/appapi.php?a=getPortalList&catid=20&page=1';
        //此处推荐使用箭头函数。
        this.$http.get(api).then((res)=>{
          this.list = res.body.result;
        }, (err)=>{
          console.log(err);
        });
      }
    },
    mounted() {
      this.getData();
    }
  }
</script>

如果getData()中不适用箭头函数,就需要注意this问题。

getData: function () {
  let api = 'http://www.phonegap100.com/appapi.php?a=getPortalList&catid=20&page=1';
  const _this = this;
  this.$http.get(api).then(function (res) {
    _this.list = res.body.result;
  }, function (err) {
    console.log(err);
  });
}

二,axios请求数据

介绍:这是一个第三方的插件 github地址:https://github.com/axios/axios

axios 与 fetch-jsonp 同为第三方插件

1、安装

cnpm install axios --save

直接调用。和vue-resource的区别是:aixos是每在一个页面用一次就要在该页面调用一次。vue-resource是绑定了全局的了。

2、哪里用哪里引入axios

Axios.get(api).then((response)=>{
  this.list=response.data.result;
}).catch((error)=>{
  console.log(error);
})

关于axios的跨域请求

在config->index.js->proxyTable配置如下:target填写自己想要的地址

vue请求数据的三种方式

如下配置,url为地址后面所带的参数,配置好后,现在npm run dev 运行就行。

vue请求数据的三种方式

关于多个并发请求:

vue请求数据的三种方式

上面这个是同一地址的跨域,如果要拿不同地址的跨域,只需要更改config->index.js->proxyTable的配置,增加地址块就行。

三,关于fetch-jsonp

github地址:https://github.com/camsong/fetch-jsonp

1、安装

cnpm install fetch-jsonp --save

2、哪里用哪里引入fetch-jsonp

fetchJsonp('/users.jsonp')
 .then(function(response) {
  return response.json()
 }).then(function(json) {
  console.log('parsed json', json)
 }).catch(function(ex) {
  console.log('parsing failed', ex)
 })

到此这篇关于vue请求数据的三种方式的文章就介绍到这了,更多相关vue 请求数据内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Javascript 相关文章推荐
jQuery 1.3 和 Validation 验证插件1.5.1
Jul 09 Javascript
Jquery之美中不足小结
Feb 16 Javascript
jquery实现当滑动到一定位置时固定效果
Jun 17 Javascript
javascript Array 数组常用方法
Apr 05 Javascript
浅谈JavaScript中运算符的优先级
Jul 07 Javascript
jQuery实现浮动层随浏览器滚动条滚动的方法
Sep 22 Javascript
AJAX实现瀑布流触发分页与分页触发瀑布流的方法
May 23 Javascript
解决ie img标签内存泄漏的问题
Oct 13 Javascript
vue 利用路由守卫判断是否登录的方法
Sep 29 Javascript
利用JavaScript的Map提升性能的方法详解
Aug 14 Javascript
微信公众号平台接口开发 菜单管理的实现
Aug 14 Javascript
Vue路由 重定向和别名的区别说明
Sep 09 Javascript
使用Vue 自定义文件选择器组件的实例代码
Mar 04 #Javascript
JS中==、===你分清楚了吗
Mar 04 #Javascript
js数组相减简单示例【删除a数组所有与b数组相同元素】
Mar 04 #Javascript
通过实例了解Javascript柯里化流程
Mar 03 #Javascript
微信小程序getLocation 需要在app.json中声明permission字段
Mar 03 #Javascript
Javascript作用域和作用域链原理解析
Mar 03 #Javascript
JS数组方法reduce的用法实例分析
Mar 03 #Javascript
You might like
PHP借助phpmailer发送邮件
2015/05/11 PHP
简单实现php上传文件功能
2017/09/21 PHP
php实现统计二进制中1的个数算法示例
2018/01/23 PHP
php进程daemon化的正确实现方法
2018/09/06 PHP
PHP使用JpGraph绘制折线图操作示例【附源码下载】
2019/10/18 PHP
JS 各种网页尺寸判断实例方法
2013/04/18 Javascript
JQuery调用绑定click事件的3种写法
2015/03/28 Javascript
HTML5使用DeviceOrientation实现摇一摇功能
2015/06/05 Javascript
JavaScript函数柯里化原理与用法分析
2017/03/31 Javascript
Angular2自定义分页组件
2017/04/19 Javascript
微信小程序--组件(swiper)详细介绍
2017/06/13 Javascript
详解在网页上通过JS实现文本的语音朗读
2019/03/28 Javascript
解决vue里a标签值解析变量,跳转页面,前面加默认域名端口的问题
2020/07/22 Javascript
python使用心得之获得github代码库列表
2014/06/25 Python
Python实现批量转换文件编码的方法
2015/07/28 Python
python编写Logistic逻辑回归
2020/12/30 Python
Python列表推导式与生成器表达式用法示例
2018/02/08 Python
对Python3中的print函数以及与python2的对比分析
2018/05/02 Python
用Python获取摄像头并实时控制人脸的实现示例
2019/07/11 Python
Python 通过微信控制实现app定位发送到个人服务器再转发微信服务器接收位置信息
2019/08/05 Python
Jupyter notebook运行Spark+Scala教程
2020/04/10 Python
python获取本周、上周、本月、上月及本季的时间代码实例
2020/09/08 Python
详解Python+Selenium+ChromeDriver的配置和问题解决
2021/01/19 Python
HOTEL INFO英国:搜索全球酒店
2019/08/08 全球购物
全球领先的在线cosplay服装商店:RoleCosplay
2020/01/18 全球购物
师范生的个人求职信范文
2014/01/04 职场文书
小学生班会演讲稿
2014/01/09 职场文书
咖啡书吧创业计划书
2014/01/13 职场文书
给分销商的致歉信
2014/01/14 职场文书
团代会主持词
2014/04/02 职场文书
报到证办理个人委托书
2014/10/06 职场文书
毕业生银行实习自我鉴定
2014/10/14 职场文书
研讨会通知
2015/04/27 职场文书
初三毕业感言
2015/07/31 职场文书
祝福语集锦:给满月宝宝的祝福语
2019/11/20 职场文书
spring cloud eureka 服务启动失败的原因分析及解决方法
2022/03/17 Java/Android