fetch使用整理
来源:互联网 发布:centos lnmp安装包 编辑:程序博客网 时间:2024/06/05 19:50
fetch 使用
1. 浏览器支持情况
fetch是相对较新的技术,当然就会存在浏览器兼容性的问题,当前各个浏览器低版本的情况下都是不被支持的,因此为了在所有主流浏览器中使用fetch 需要考虑 fetch 的 polyfill 了
require('es6-promise').polyfill(); require('isomorphic-fetch');
引入这两个文件,就可以支持主流浏览器了
2. API
fetch(url,{ // url: 请求地址 method: "GET", // 请求的方法POST/GET等 headers : { // 请求头(可以是Headers对象,也可是JSON对象) 'Content-Type': 'application/json', 'Accept': 'application/json' }, body: , // 请求发送的数据 blob、BufferSource、FormData、URLSearchParams(get或head方法中不能包含body) cache : 'default', // 是否缓存这个请求 credentials : 'same-origin', //要不要携带 cookie 默认不携带 omit、same-origin 或者 include mode : "", /* mode,给请求定义一个模式确保请求有效 same-origin:只在请求同域中资源时成功,其他请求将被拒绝(同源策略) cors : 允许请求同域及返回CORS响应头的域中的资源,通常用作跨域请求来从第三方提供的API获取数据 cors-with-forced-preflight:在发出实际请求前执行preflight检查 no-cors : 目前不起作用(默认) */ }).then(resp => { /* Response 实现了 Body, 可以使用 Body 的 属性和方法: resp.type // 包含Response的类型 (例如, basic, cors). resp.url // 包含Response的URL. resp.status // 状态码 resp.ok // 表示 Response 的成功还是失败 resp.headers // 包含此Response所关联的 Headers 对象 可以使用 resp.clone() // 创建一个Response对象的克隆 resp.arrayBuffer() // 返回一个被解析为 ArrayBuffer 格式的promise对象 resp.blob() // 返回一个被解析为 Blob 格式的promise对象 resp.formData() // 返回一个被解析为 FormData 格式的promise对象 resp.json() // 返回一个被解析为 Json 格式的promise对象 resp.text() // 返回一个被解析为 Text 格式的promise对象 */ if(resp.status === 200) return resp.json(); // 注: 这里的 resp.json() 返回值不是 js对象,通过 then 后才会得到 js 对象 throw New Error ('false of json'); }).then(json => { console.log(json); }).catch(error => { consolr.log(error); })
3. 常用情况
1. 请求 json
fetch('http://xxx/xxx.json').then(res => { return res.json(); }).then(res => { console.log(res); })
2. 请求文本
fetch('/xxx/page').then(res => { return res.text(); }).then(res => { console.log(res); })
3. 发送普通 json 数据
fetch('/xxx', { method: 'post', body: JSON.stringify({ username: '', password: '' }) });
4. 发送form 表单数据
var form = document.querySelector('form'); fetch('/xxx', { method: 'post', body: new FormData(form) });
5. 获取图片
URL.createObjectURL()
fetch('/xxx').then(res => { return res.blob(); }).then(res => { document.querySelector('img').src = URL.createObjectURL(imageBlob); })
6. 上传
var file = document.querySelector('.file') var data = new FormData() data.append('file', file.files[0]) fetch('/xxx', { method: 'POST', body: data })
4. 封装
require('es6-promise').polyfill(); require('isomorphic-fetch'); export default function request(method, url, body) { method = method.toUpperCase(); if (method === 'GET') { body = undefined; } else { body = body && JSON.stringify(body); } return fetch(url, { method, headers: { 'Content-Type': 'application/json', 'Accept': 'application/json' }, body }).then((res) => { if (res.status >= 200 && res.status < 300) { return res; } else { return Promise.reject('请求失败!'); } }) } export const get = path => request('GET', path); export const post = (path, body) => request('POST', path, body); export const put = (path, body) => request('PUT', path, body); export const del = (path, body) => request('DELETE', path, body);
5. 参考
- Fetch API 初探
- Fetch API
- XHR or Fetch API ?
阅读全文
0 0
- fetch使用整理
- 使用Fetch
- 使用 Fetch
- FETCH NEXT的使用
- 使用fetch下载文件
- fetch 的使用
- 搜集整理总结#hibernate中的fetch
- fetch bulk collect into 使用
- fetch next from的使用
- git fetch /rebase /merge 使用
- Hibernate开发------fetch的使用
- git fetch的使用介绍
- 使用Fetch实现异步通信
- git fetch /rebase /merge 使用
- FETCH
- Fetch
- FETCH
- Fetch
- Spring @Resource、@Autowired、@Qualifier的注解注入及区别
- Python中用format函数格式化字符串的用法
- jQuery获取选中的复选框
- java堆、栈、方法区、常量池
- Kafka(0.10.0.1)--配置Zookeeper和单节点多brokers
- fetch使用整理
- framebuffer驱动详解3——framebuffer驱动框架分析
- jstl 格式化日期
- VTK生成球并将其导出为obj三维格式,可在Meshlab中提取三维点云
- java并发编程(三)--java中的锁(Lock接口和队列同步器AQS)
- QString的常用方法
- nginx反向代理三台web服务器,实现负载均衡
- 使用 GPUs
- Mac开发学习笔记之label使用超链接