vue的请求数据方式

一,vue-resource请求数据

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

步骤:

1,npm安装

npm  install vue-resource  --save

或者使用cnpm淘宝镜像安装,会快很多。cnpm  install  vue-resource  --save

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

2,在main.js入口文件中引入vue-resource

引入之后要使用这个插件

如果不使用此插件的话,会报如下错误:

3,在项目中用this.$http.get()等等使用,详情看 vue-resource  github

实例:

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

二,axios请求数据

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

第一步:npm安装  npm install axios  -save

第二步:直接调用。和vue-resource的区别是:aixos是每在一个页面用一次就要在该页面调用一次。vue-resource是绑定了全局的了。具体使用方法可以看github:

第三步:关于axios的跨域请求

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

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

第四步:关于多个并发请求

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

三,关于fetch-jsonp

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

原文地址:https://www.cnblogs.com/jasonLiu2018/p/11069970.html

时间: 2024-11-02 01:44:32

vue的请求数据方式的相关文章

BeanUtils--02--- 创建工具类 封装request 请求数据到实体类中

1. 前台传过来的数据都是字符串, 基本类型BeanUtils会自动转换, 日期类型需要注册转换器,自带的DateLocalConvert转换器未实现空字符串""的判断 public static <T> T copy2Bean(HttpServletRequest request, Class<T> clazz) { ConvertUtils.register(new Converter() {//注册日期转换器 public Object convert(C

get和post方式请求数据,jsonp

get方式请求数据: p.p1 { margin: 0.0px 0.0px 0.0px 0.0px; font: 19.0px Consolas; color: #289c97 } p.p2 { margin: 0.0px 0.0px 0.0px 0.0px; font: 19.0px Consolas; color: #060606 } p.p3 { margin: 0.0px 0.0px 0.0px 0.0px; font: 19.0px Consolas; color: #4663cc }

【黑马Android】(05)短信/查询和添加/内容观察者使用/子线程网络图片查看器和Handler消息处理器/html查看器/使用HttpURLConnection采用Post方式请求数据/开源项目

备份短信和添加短信 操作系统短信的uri: content://sms/ <?xml version="1.0" encoding="utf-8"?> <manifest xmlns:android="http://schemas.android.com/apk/res/android" package="com.itheima28.backupsms" android:versionCode="1

TCP Incast 问题TCP INCAST解决思路 应用场景:在集群文件系统内,客户端应用请求某个逻辑数据块(通常情况下一个读数据块大小是1MB),该数据块以条带化方式分别存储在几个存储服务器上,即采用更小的数据片存储(32KB,256KB等),这种小数据片称为服务器请求单元(SRU)。只有当客户端接收到所有的服务器返回的其所请求数据块的SRU后才继续发送出下一个数据块请求,即客户端同时向

TCP INCAST解决思路 应用场景:在集群文件系统内,客户端应用请求某个逻辑数据块(通常情况下一个读数据块大小是1MB),该数据块以条带化方式分别存储在几个存储服务器上,即采用更小的数据片存储(32KB,256KB等),这种小数据片称为服务器请求单元(SRU).只有当客户端接收到所有的服务器返回的其所请求数据块的SRU后才继续发送出下一个数据块请求,即客户端同时向多个存储服务器发起并发TCP请求,且所有服务器同时向客户端发送SRU. 出现的问题: 1)         这种多对一的服务器向客

使用HttpURLConnection采用get方式或post方式请求数据

使用URLConnection提交请求: 1.通过调用URL对象openConnection()方法来创建URLConnection对象 2.设置URLConnection的参数和普通的请求属性 3.如果只是发送GET方式请求,使用connet方法建立和远程资源之间的实际连接即可:如果发送POST方式的请求,需要获取URLConnection实例对应的输出流来发送请求参数. 4.远程资源变为可用,程序可以访问远程资的头字段,或通过输入流读取远程资源的数据. 提交数据到服务器端(存在中文乱码):

09.VUE学习之watch监听属性变化实现类百度搜索栏功能ajax异步请求数据

cmd下安装axios npm install axios 安装好后,会多出node_modules文件夹 思路: 监听data里的word改变时,发送ajax异步请求数据, 把返回的数据赋值给data里的result,再传给模板里 9.html <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible&qu

VUE - 使用axios数据请求时数据绑定时 报错 TypeError: Cannot set property &#39;xxxx&#39; of undefined 的解决办法

created() { var that=this axios.get('http://jsonplaceholder.typicode.com/todos') .then(function (res) { // handle success // console.log(res); that.todos = res.data }) .catch(function (error) { // handle error console.log(error); }) .finally(function

axios 请求数据 入门级介绍

今天歇一下axios请求数据的案例,之前一直用ajax请求,现在看一下官方推荐 1.安装 npm install --save axios 2.引入 在main.js中 import VueAxios from 'vue-axios' Vue.use(VueAxios, axios) 3.应用 //第一种方式 参数直接卸载地址栏 get可以适用 this.axios.get('http://www.appsun.com.cn/GZUSER/marktime/getMarkTime?markdat

node.js搭建代理服务器请求数据

1.引入node.js中的模块 1 var http = require("http"); 2 var url = require("url"); 3 var qs = require("querystring"); 2.创建服务器 //用node中的http创建服务器 并传入两个形参 http.createServer(function(req , res) { //设置请求头 允许所有域名访问 解决跨域 res.setHeader("