vue实现ajax请求(vue-resource和axios)
1、vue-resouce实现ajax请求
vue1中主要用vue-resouce实现ajax请求,
2.1 引用vue-resouce
引入axios,直接在index.html文件中引入;
或者在main.js文件中引入vue-resouce.js,并use vue-resouce;
2.1 使用vue-resouce
三种ajax请求的方式
2、axios实现ajax请求
2.1 引用axios
vue2.0版本已不推荐使用vue-resouce发送ajax请求,推荐使用axios发送请求;
一:直接在index中引入vue.js和axios.js文件,
<script src="js/vue.min.js"></script>
<script src="js/axios.min.js"></script>
或者在main.js文件中导入axios,import axios from ‘axios’,将axios设置在vue中的原型中Vue.prototype.axios = axios;
2.2 使用axios
在组件中需要发送ajax请求的地方(后一种方法引入的axios改为this.axios):
axios.type(url, params).then(function(res){
成功回调
}).catch(function(res){
失败回调
});
或者:
axios({
method: type,
url: '',
data: {}
}).then(function(res){
成功回调
}).catch(function(res){
失败回调
});
axios不支持跨域请求,如果要进行跨域请求,那么使用vue-resouce获取jquery发送ajax请求。
注: axios是一个基于Promise的HTTP请求;关于Promise示例:
vue实现ajax请求(vue-resource和axios)的更多相关文章
- 从零开始学 Web 之 Vue.js(四)Vue的Ajax请求和跨域
大家好,这里是「 从零开始学 Web 系列教程 」,并在下列地址同步更新...... github:https://github.com/Daotin/Web 微信公众号:Web前端之巅 博客园:ht ...
- Vue处理ajax请求
Ajax请求 1>解决跨域问题 1.1前端解决.只需要在vue.config.js中增加devServer节点增加代理: const path = require("path" ...
- vue 发送ajax请求
一. 简介 1.vue本身不支持发送AJAX请求,需要使用vue-resource(vue1.0版本).axios(vue2.0版本)等插件实现 2.axios是一个基于Promise的HTTP请求客 ...
- vue发送ajax请求
一.vue-resource 1.简介 一款vue插件,用于处理ajax请求,vue1.x时广泛应用,现不被维护. 2.使用流程 step1:安装 [命令行输入] npm install vue-re ...
- vue中ajax请求发送
示例 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8& ...
- vue的ajax请求之axios
axios.get(this.apiUrl+'good/info',{params:{'goodsid':'sp441153'}}) .then(function(response){ console ...
- Vue(七)发送Ajax请求
发送AJAX请求 1. 简介 vue本身不支持发送AJAX请求,需要使用vue-resource.axios等插件实现 axios是一个基于Promise的HTTP请求客户端,用来发送请求,也是vue ...
- Vue的Ajax(vue-resource/axios)
一 简介 1.vue本身不支持发送AJAX请求,需要使用vue-resource(vue1.0版本).axios(vue2.0版本)等插件实现 2.axios是一个基于Promise的HTTP请求客户 ...
- vue实现ajax滚动下拉加载,同时具有loading效果
<!doctype html> <html> <head> <meta charset="utf-8"> <title> ...
随机推荐
- impala删表,而hdfs上文件却还在异常处理
Impala/hive删除表,drop后,hdfs上文件却还在处理方法: 问题原因分析,如下如可以看出一个属组是hive,一个是impala,keberas账号登录hive用户无法删除impala用户 ...
- 待补 http://acm.hdu.edu.cn/showproblem.php?pid=6602
http://acm.hdu.edu.cn/showproblem.php?pid=6602 终于能够看懂的题解: https://blog.csdn.net/qq_40871466/article/ ...
- sql 时间函数大全
1. 当前系统日期.时间 select getdate() 2. dateadd 在向指定日期加上一段时间的基础上,返回新的 datetime 值 例如:向日期加上2天 se ...
- win32 socket编程(五)——客户端实例(TCP)
一.客户端操作流程 1.1 加载套接字库(WSAStartup()) 1.2创建套接字(socket()). 1.3向服务器发出连接请求(connect()). 对于客户端来说,它不需要绑定,可以直接 ...
- 只要三步,你就可以在github上发布网站了
今天,看到github推送了一个新的消息,Publishing with GitHub Pages, now as easy as 1, 2, 3.总结起来就是在github将你的文档或者发布网页将会 ...
- pg_config - 检索已安装版本的 PostgreSQL 的信息
SYNOPSIS pg_config {--bindir | --includedir | --includedir-server | --libdir | --pkglibdir | --confi ...
- 脚本_查看所有虚拟机磁盘以及 CPU 的使用量
#!bin/bash#作者:liusingbon#功能:查看所有虚拟机磁盘使用量以及 CPU 使用量信息read -p "按任意键进入查看页面.比如按下Enter键" keyvir ...
- 前端每日实战:93# 视频演示如何用纯 CSS 创作一根闪电连接线
效果预览 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/RBjdzZ 可交互视频 此视频是可 ...
- Java第二阶段笔记
抽象类不能创建对象 抽象类可以有构造方法成员变量成员方法静态方法final修饰的方法(只能被子类调用,不能被重写)抽象方法(可以有0个或多个) 抽象方法不能有方法体,只能以:结尾,只能存在于抽象方法中 ...
- centos 6.5 安装 nginx
从nginx官网下载安装包:nginx-1.8.1.tar.gz,解压 tar xvf nginx-1.8.1.tar.gz -C /usr/local 安装依赖 yum install gcc yu ...