ajax、fetch、axios — 请求数据
jquery ajax
jq 的ajax是对原生XHR的封装,除此以外还增添了对JSONP的支持。用起来非常方便
用法:
$.ajax({
url:发送请求的地址,
data:数据的拼接,//发送到服务器的数据
type:'get',//请求方式,默认get请求
dataType:'json',//服务器返回的数据类型
async:true,//是否异步,默认true
cache:false,//设置为 false 将不会从浏览器缓存中加载请求信息
success:function(){},//请求成功后的回调函数(这个函数会得到一个参数:从服务器返回的数据)
error: function(){}//请求失败时调用此函数 })
优缺点:
- 本身是针对MVC的编程,不符合现在前端MVVM的浪潮
- 基于原生的XHR开发,XHR本身的架构不清晰,已经有了fetch的替代方案
- JQuery整个项目太大,单纯使用ajax却要引入整个JQuery非常的不合理(采取个性化打包的方案又不能享受CDN服务)
- 配置和调用方式非常混乱,而且基于事件的异步模型不友好
fetch
原生提供的ajax请求的一种方式,用于获取资源
由于Fetch API是基于Promise设计,旧浏览器不支持Promise,需要使用pollyfill es6-promise
fetch的优势:
- 语义简洁,更加语义化
- 更加底层,提供的API丰富(request, response)
- 脱离了XHR,是ES规范里新的实现方式
- 基于promise实现,支持async/await
用法:
get方式
fetch('/users?'+new URLSearchParams(obj).toString())
.then(d=>d.json())
.then(d=>{
console.log(d);
})
post方式
fetch('/users',{
method:'post',
headers:{'Content-Type':'application/x-www-form-urlencoded'},//设置头信息
body:new URLSearchParams(obj).toString()//将对象变为url地址上的查询信息
})
.then(d=>d.json())
.then(d=>{
console.log(d);
})
axios
用法:
get方式
axios.get('/get?user=xiaohuang')
.then(e=>{ //进了then就会成功,否则会进catch
console.log(e);
})
.catch(e=>{
//报错内容
})
post方式
axios({
method: 'post',
url: '/user/12345',
data: {
firstName: 'Fred',
lastName: 'Flintstone'
}
})
.then(function (response) {
console.log(response);
})
.catch(function (error) {
console.log(error);
})
特性:
- 从 node.js 创建 http 请求
- 支持 Promise API
- 客户端支持防止CSRF
- 提供了一些并发请求的接口
- 自动转换JSON数据
栗子:
get请求成功之后 再请求post 然后 两个条件都成立 才执行结果
axios.get('/get?user=xiaoming')
.then(e=>{
if(e.data.code == 0){
//这里的目的是为了进下一次的then
return axios.post('/post',{
user:'xiaohong'
})
else{
//这里目的是为了进下一次的catch
throw '失败';
}
}
})
.then(e=>{
if(e.data.code == 0){
console.log('芝麻开门');
}else{
throw '开门';
}
})
.catch(e=>{
console.log(e);
})
axios.all
同时执行多个请求,all里面必须两个请求都成立才返回成功(只要一个请求失败,整体都会失败)
let arr = [get(),post()];
axios.all(arr)
.then( axios.spread(function (a, b) {
console.log(1);
if(a.data.code == 0 && b.data.code == 0){
console.log('变身');
}else{
console.log('再等一万年');
}
})).catch(e=>{
console.log('错误');
})
ajax、fetch、axios — 请求数据的更多相关文章
- fetch 如何请求数据
fetch 如何请求数据 在 传统Ajax 时代,进行 API 等网络请求都是通过XMLHttpRequest或者封装后的框架进行网络请求,然而配置和调用方式非常混乱,对于刚入门的新手并不友好 二 与 ...
- Vue之单文件组件的数据传递,axios请求数据及路由router
1.传递数据 例如,我们希望把父组件的数据传递给子组件. 可以通过props属性来进行传递. 传递数据三个步骤: 步骤1:在父组件中,调用子组件的组名处,使用属性值的方式往下传递数据 <Menu ...
- ajax和axios请求本地json数据对比
AJAX 是一种在无需重新加载整个网页的情况下,能够更新部分网页的技术,通过在后台与服务器进行少量数据交换,AJAX 可以使网页实现异步更新.这意味着可以在不重新加载整个网页的情况下,对网页的某部分进 ...
- vue之axios请求数据本地json
写给自己的话:静态的json文件要记得放在static文件夹下,想打自己 1.下载插件 npm install axios --save 2.在main.js下引用axios import axios ...
- Vue框架Element UI教程-axios请求数据
Element UI手册:https://cloud.tencent.com/developer/doc/1270 中文文档:http://element-cn.eleme.io/#/zh-CN gi ...
- axios请求数据完整
<template> <!-- 所有的内容要被根节点包含起来 --> <div id="home"> 首页组件 <button @clic ...
- 解析Fetch实现请求数据
一 序言 在 传统Ajax 时代,进行 API 等网络请求都是通过XMLHttpRequest或者封装后的框架进行网络请求,然而配置和调用方式非常混乱,对于刚入门的新手并不友好.今天我们介绍的Fetc ...
- 关于试用jquery的jsonp实现ajax跨域请求数据的问题
我们在开发过程中遇到要获取另一个系统数据时,就造成跨域问题,这就是下文要说的解决办法: 先我们熟悉下json和jsonp的区别: 使用AJAX就会不可避免的面临两个问题,第一个是AJAX以何种格式来交 ...
- Ajax跨域请求数据实例(JSOPN方式)
今天在做取消申请的时候遇到了一个跨域ajax提交的问题. 情景是: 系统A是asp.net的站点,其中包括一个取消申请的接口(get方式通过参数提交到系统的某一个页面,然后返回提交成功或失败) 系统B ...
随机推荐
- 自学Python4.5-装饰器举例
自学Python之路-Python基础+模块+面向对象自学Python之路-Python网络编程自学Python之路-Python并发编程+数据库+前端自学Python之路-django 自学Pyth ...
- VS编译LESS插件
1. LESS 用LESS写CSS可以用写程序代码的习惯写CSS.用了之后写CSS的效率会提高很多. 2.解释LESS 写出来的文件扩展名是.less,要运行的话,先解释成正常的CSS文件. 3. ...
- 「HNOI2016」网络 解题报告
「HNOI2016」网络 我有一个绝妙的可持久化树套树思路,可惜的是,它的空间是\(n\log^2 n\)的... 注意到对一个询问,我们可以二分答案 然后统计经过这个点大于当前答案的路径条数,如果这 ...
- BZOJ3779重组病毒LCT
题目描述 黑客们通过对已有的病毒反编译,将许多不同的病毒重组,并重新编译出了新型的重组病毒.这种病毒的繁殖和变异能力极强.为了阻止这种病毒传播,某安全机构策划了一次实验,来研究这种病毒.实验在一个封闭 ...
- 小电阻之大作用——CAN终端电阻
CAN总线终端电阻,顾名思义就是加在总线末端的电阻.此电阻虽小,但在CAN总线通信中却有十分重要的作用. 终端电阻的作用 CAN总线终端电阻的作用有两个: 1.提高抗干扰能力,确保总线快速进入隐性状态 ...
- Yii2 如何输出 sql 语句?
可以用 $model->find()->createCommand()->getRawSql(); 不能带 all(). find() 它的 返回值类型是 yii\db\Active ...
- springAop 使用@Around,@After等注解时,代码运行两边的问题
springAop使用@Around,@After等注解时,代码运行两边的问题 将@Component注解删掉就好了
- Docker普通用户不使用sudo提权
解决方法 sudo groupadd docker 添加Docker用户组 sudo gpasswd -a ${USER} docker 添加你的用户到Docker用户组 reboot 重启系统.也可 ...
- HDU3032 Nim or not Nim?
解:使用sg函数打表发现规律,然后暴力异或起来即可. #include <bits/stdc++.h> typedef long long LL; ; int a[N]; inline L ...
- testng学习-before&after,parameters,并行,factory,beanshell,监听器,依赖注入
一系列的before after的操作测试 [TestNG] Running: C:\Users\user\AppData\Local\Temp\testng-eclipse-1538841744\t ...