【巷子】---fetch---基本使用
一、fetch
fetch是一种XMLHttpRequest的一种替代方案,在工作当中除了用ajax获取后台数据外我们还可以使用fetch、axios来替代ajax
二、fetch的基本使用
1、npm install whatwg-fetch --save
2、import 'whatwg-fetch'
fetch(url,options).then((res)=>{
console.log(res);
},function(err){
console.log(err)
})
说明:
1、fetch的返回值是一个promise对象
2、options
method:HTTP请求方式,默认是GET
body:请求的参数
因为JSON内容是必须的,所以当设置主体时会调用JSON.stringify。
fetch('/xxx', {
method: 'post',
body: JSON.stringify({
username: '',
password: ''
})
});
headers:HTTP请求头
因为一般使用JSON数据格式,所以设置ContentType为application/json
credentials:默认为omit,忽略的意思,也就是不带cookie还有两个参数,same-origin,意思就是同源请求带cookie;include,表示无论跨域还是同源请求都会带cookie
3、在.then里面第一个回调函数中处理response
status(number): HTTP返回的状态码,范围在100-599之间
statusText(String): 服务器返回的状态文字描述
headers: HTTP请求返回头
body: 返回体,这里有处理返回体的一些方法
text(): 将返回体处理成字符串类型
json(): 返回结果和 JSON.parse(responseText)一样
blob(): 返回一个Blob,Blob对象是一个不可更改的类文件的二进制数据
如果请求一个XML格式文件,则调用response.text。如果请求图片,使用response.blob方法
注意:
cookie传递
必须在header参数里面加上credentials: 'include',才会如xhr一样将当前cookies带到请求中去
例子:
fetch("/restapi/shopping/v2/banners?consumer=1&type=1&latitude=39.930321&longitude=116.217377",{
headers:{'Content-Type': 'application/json'}
}).then(response => {
return response.json()
})
.then((data)=>{
console.log(data)
})
总结:fetch与axios的区别
axios("http://xxx/xxx.json?a=123'").then((res)=>{
console.log(res)//这里的r是响应结果
})
fetch("http://www.baidu.com").then((res)=>{
console.log(res);//是一个综合各种方法的对象,并不是请求的数据
})
fetch返回的是一个未处理的方法集合,我们可以通过这些方法得到我们想要的数据类型。如果我们想要json格式,就执行response.json(),如果我们想要字符串就response.text()
axios 是一个基于Promise 用于浏览器和 nodejs 的 HTTP 客户端,它本身具有以下特征:
从浏览器中创建 XMLHttpRequest
从 node.js 发出 http 请求
支持 Promise API
拦截请求和响应
转换请求和响应数据
自动转换JSON数据
客户端支持防止CSRF/XSRF
fetch:
符合关注分离,没有将输入、输出和用事件来跟踪的状态混杂在一个对象里
更加底层,提供的API丰富(request, response)
脱离了XHR,是ES规范里新的实现方式
1)fetchtch只对网络请求报错,对400,500都当做成功的请求,需要封装去处理
2)fetch默认不会带cookie,需要添加配置项
3)fetch不支持abort,不支持超时控制,使用setTimeout及Promise.reject的实现的超时控制并不能阻止请求过程继续在后台运行,造成了量的浪费
4)fetch没有办法原生监测请求的进度,而XHR可以
【巷子】---fetch---基本使用的更多相关文章
- Git 少用 Pull 多用 Fetch 和 Merge
本文有点长而且有点乱,但就像Mark Twain Blaise Pascal的笑话里说的那样:我没有时间让它更短些.在Git的邮件列表里有很多关于本文的讨论,我会尽量把其中相关的观点列在下面. 我最常 ...
- git提示:Fatal:could not fetch refs from ....
在git服务器上新建项目提示: Fatal:could not fetch refs from git..... 百度搜索毫无头绪,最后FQgoogle,找到这篇文章http://www.voidcn ...
- sublime 插件推荐: Nettuts+ Fetch
Nettuts+ Fetch github地址:Nettuts-Fetch 在sublime中直接用 ctrl+shift+P -> pci -> Nettuts-Fetch 即可下载 这 ...
- git pull和git fetch的区别
Git中从远程的分支获取最新的版本到本地有这样2个命令:1. git fetch:相当于是从远程获取最新版本到本地,不会自动merge Git fetch origin master git log ...
- Hibernate之加载策略(延迟加载与即时加载)和抓取策略(fetch)
假设现在有Book和Category两张表,表的关系为双向的一对多,表结构如下: 假设现在我想查询id为2的那本书的书名,使用session.get(...)方法: Session session=H ...
- SQL Server 2012提供的OFFSET/FETCH NEXT与Row_Number()对比测试(转)
原文地址:http://www.cnblogs.com/downmoon/archive/2012/04/19/2456451.html 在<SQL Server 2012服务端使用OFFSET ...
- Attempt to fetch logical page (...) in database 2 failed. It belongs to allocation unit xxxx not to xxx
今天一个同事说在一个生产库执行某个存储过程,遇到了错误: Fatal error 605 occurred at jul 29 2014 我试着执行该存储过程,结果出现下面错误,每次执行该存储过程,得 ...
- Fetch:下一代 Ajax 技术
Ajax,2005年诞生的技术,至今已持续了 10 年.它是一种在客户端创建一个异步请求的技术,本质上它不算创新,是一组技术的组合.它的核心对象是 XMLHttpRequest. 简单回顾下历史 19 ...
- 在 JS 中使用 fetch 更加高效地进行网络请求
在前端快速发展地过程中,为了契合更好的设计模式,产生了 fetch 框架,此文将简要介绍下 fetch 的基本使用. 我的源博客地址:http://blog.parryqiu.com/2016/03/ ...
- 解决:error: Cannot fetch repo (TypeError: expected string or buffer)
同步源码,问题重现: Fetching project platform/external/libopus Fetching project repo error: Cannot fetch repo ...
随机推荐
- 字符编码笔记:ASCII,Unicode 和 UTF-8
http://www.ruanyifeng.com/blog/2007/10/ascii_unicode_and_utf-8.html
- flexbox子盒子flex属性
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- office系列调节背景主题
更改背景主题可以参考:https://jingyan.baidu.com/article/ff42efa9332adec19e220200.html 但是这种方法只是改变了整个软件外框架的背景颜色.以 ...
- 【Android】Android中如何取消调转界面后EditText默认获取聚焦问题
参考资料: https://www.cnblogs.com/dream-cichan/p/aaaa.html http://blog.csdn.net/u013703461/article/detai ...
- PHP代码审计笔记--CSRF漏洞
0x01 前言 CSRF(Cross-site request forgery)跨站请求伪造.攻击者盗用了你的身份,以你的名义向第三方网站发送恶意请求,对服务器来说这个请求是完全合法的,但是却完成了攻 ...
- 安装RVDS2.2
本人经过一晚上的折腾,已经将rvds2.2成功部署在为AMD平台的CPU上面,除了些许小BUG外,编译程序无任何错误,可成功将产上的AXF文件通过Jlink烧制到开发板上. 感谢cdly7475为我们 ...
- MVC的简单初步学习(2)
今天似乎一切是正常的,我们的课依旧在进行着,但是恍惚脑海中并没有那样的平静,不知道在想些什么?而且今天是学习MVC的初步开始,我应该认真地学习才是正确的啊.但是我并不糊涂,今天是周一,也就是刚开始上课 ...
- [微信小程序]计算自己手机到指定位置的距离
目的: 根据目的地的坐标计算自己手机的位置离目的地的距离的 核心思路: 后续操作必须等所有异步请求都返回了才能继续 使用 const qqmap = require("../../utils ...
- 如何在浏览器中简单模拟微信浏览器(仅限于通过User Agent进行判断的页面)
模拟微信浏览器: .打开360极速 .F12开发者工具 .开发者模式左上方有一个手机样子的图标 点击进入 设备模式‘ .将UA选项中的字符串替换成: Mozilla/ 备注: 替换的字符串是微信浏览器 ...
- Python学习(25):Python执行环境
转自 http://www.cnblogs.com/BeginMan/p/3191856.html 一.python特定的执行环境 在当前脚本继续进行 创建和管理子进程 执行外部命令或程序 执行需要输 ...