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 相关文章推荐
禁止F5等快捷键的JS代码
Mar 06 Javascript
php显示当前文件所在的文件以及文件夹所有文件以树形展开
Dec 13 Javascript
js实现表格字段排序
Feb 19 Javascript
AngularJS实现Model缓存的方式
Feb 03 Javascript
JavaScript使用forEach()与jQuery使用each遍历数组时return false 的区别
Aug 26 Javascript
在一般处理程序(ashx)中弹出js提示语
Aug 16 Javascript
Vue的MVVM实现方法
Aug 16 Javascript
Vue 自定义指令实现一键 Copy功能
Sep 16 Javascript
详解Vue 单文件组件的三种写法
Feb 19 Javascript
JavaScript队列结构Queue实现过程解析
Mar 07 Javascript
JavaScript DOM常用操作代码汇总
Jul 03 Javascript
一文彻底理解js原生语法prototype,__proto__和constructor
Oct 24 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之autoload运行机制实例分析
2014/08/28 PHP
php获取URL中带#号等特殊符号参数的解决方法
2014/09/02 PHP
用JS实现一个页面多个css样式实现
2008/05/29 Javascript
javascript中的继承实例代码
2011/04/27 Javascript
Jquery中val()表单取值赋值的实例代码
2013/08/15 Javascript
JS随机漂浮广告代码具体实例
2013/11/19 Javascript
JS获取计算机mac地址以及IP的实现方法
2014/01/08 Javascript
Js实现手机发送验证码时按钮延迟操作
2014/06/20 Javascript
Javascript通过overflow控制列表闭合与展开的方法
2015/05/15 Javascript
JS实现部分HTML固定页面顶部随屏滚动效果
2015/12/24 Javascript
jQuery Ajax和getJSON获取后台普通json数据和层级json数据用法分析
2016/06/08 Javascript
Bootstrap Table的使用总结
2016/10/08 Javascript
vue-router 学习快速入门
2017/03/01 Javascript
Vue2.0基于vue-cli+webpack Vuex的用法(实例讲解)
2017/09/15 Javascript
webpack-url-loader 解决项目中图片打包路径问题
2019/02/15 Javascript
vue+egg+jwt实现登录验证的示例代码
2019/05/18 Javascript
一文快速了解JQuery中的AJAX
2019/05/31 jQuery
layui实现checkbox的目录树tree的例子
2019/09/12 Javascript
解决vue请求接口第一次成功,第二次失败问题
2020/09/08 Javascript
Element-ui 自带的两种远程搜索(模糊查询)用法讲解
2021/01/29 Javascript
详解javascript脚本何时会被执行
2021/02/05 Javascript
Python的批量远程管理和部署工具Fabric用法实例
2015/01/23 Python
python内存管理分析
2015/04/08 Python
python输出指定月份日历的方法
2015/04/23 Python
pandas 读取各种格式文件的方法
2018/06/22 Python
对python中dict和json的区别详解
2018/12/18 Python
基于Python实现用户管理系统
2019/02/26 Python
python numpy 矩阵堆叠实例
2020/01/17 Python
解决Jupyter无法导入已安装的 module问题
2020/04/17 Python
Python爬虫实例——爬取美团美食数据
2020/07/15 Python
Super-Pharm波兰:药房和香水在一个地方
2020/08/18 全球购物
给老婆的搞笑检讨书
2014/01/12 职场文书
《九寨沟》教学反思
2014/04/08 职场文书
业务员年终工作总结2015
2015/05/28 职场文书
学困生帮扶工作总结
2015/08/13 职场文书
Ajax请求超时与网络异常处理图文详解
2021/05/23 Javascript