[干货]react学习笔记之fetch数据请求和使用

安装

    1. npm install whatwg-fetch –save-dva; 要么
    2. bower install fetch; 要么
    3. yarn add whatwg-fetch
导入:import fetch from ‘dva/fetch’;

用法

 HTML

fetch('/users.html') .then(function(response) { return response.text() }).then(function(body) { document.body.innerHTML = body })

JSON

fetch('/users.json') .then(function(response) { return response.json() }).then(function(json) { console.log('parsed json', json) }).catch(function(ex) { console.log('parsing failed', ex) })

Response metadata

fetch('/users.json').then(function(response) { console.log(response.headers.get('Content-Type')) console.log(response.headers.get('Date')) console.log(response.status) console.log(response.statusText) })

Post form

var form = document.querySelector('form') fetch('/users', { method: 'POST', body: new FormData(form) })

 Post JSON

fetch('/users', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ name: 'Hubot', login: 'hubot', }) })

File upload

var input = document.querySelector('input[type="file"]') var data = new FormData() data.append('file', input.files[0]) data.append('user', 'hubot') fetch('/avatars', { method: 'POST', body: data })
注意事项
即使响应是HTTP 404或500,则返回的Promise fetch() 也不会拒绝HTTP错误状态。相反,它将正常解析,只会拒绝网络故障或阻止请求完成。
默认情况下,fetch 不会从服务器发送或接收任何Cookie,如果站点依赖于维护用户会话,则会导致未经身份验证的请求。

处理HTTP错误状态

要使fetchPromise拒绝HTTP错误状态,即在任何非2xx状态下,定义一个自定义响应处理程序: function checkStatus(response) { if (response.status >= 200 && response.status < 300) { return response } else { var error = new Error(response.statusText) error.response = response throw error } } function parseJSON(response) { return response.json() } fetch('/users') .then(checkStatus) .then(parseJSON) .then(function(data) { console.log('request succeeded with JSON response', data) }).catch(function(error) { console.log('request failed', error) })

发送Cookie

要自动发送当前域的Cookie,credentials必须提供该选项: fetch('/users', { credentials: 'same-origin' }) “同源”值使得fetch与Cookie相似的XMLHttpRequest类似。否则,Cookie将不会被发送,导致这些请求不保留认证会话。 对于CORS请求,使用“include”值允许将凭据发送到其他域: fetch('https://example.com:1234/users', { credentials: 'include' }) 版权声明:除特别注明外,本站所有文章均为田珊珊个人博客原创 转载请注明:出处来自田珊珊个人博客 » [干货]react学习笔记之fetch数据请求和使用
点赞

发表评论

电子邮件地址不会被公开。 必填项已用*标注
  • 创业网说道:
    冬天虽已来临,祝您四季如春!
  • 三五创业网说道:
    潜心学习,认真拜读!
  • 博主写的很深奥哦,我这个大二生根本看不懂
  • 丁酉年(鸡)九月初十 2017-10-29到此一游!
  • 朱绪博客说道:
    很强 :exclaim: 技术流啊
  • 健康网说道:
    学海无涯,博客有道!拜读咯!
  • 套图网说道:
    不止一次的来,不止一次的去,来来去去,这就是这个博客的魅力!
  • U乐娱乐注册