fetch-polyfill

fetch polyfill which supports all mainstream browsers, even IE6, IE7, IE8.....

$ npm install fetch-polyfill2 --save
$ npm install bluebird -- save
$ npm install json3 -- save

HTML

1fetch('/users.html')
2  .then(function(response) {
3    return response.text()
4  }).then(function(body) {
5    document.body.innerHTML = body
6  })

JSON

1fetch('/users.json')
2  .then(function(response) {
3    return response.json()
4  }).then(function(json) {
5    console.log('parsed json', json)
6  }).catch(function(ex) {
7    console.log('parsing failed', ex)
8  })

Response metadata

1fetch('/users.json').then(function(response) {
2  console.log(response.headers.get('Content-Type'))
3  console.log(response.headers.get('Date'))
4  console.log(response.status)
5  console.log(response.statusText)
6})

Post form

1var form = document.querySelector('form')
2
3fetch('/users', {
4  method: 'POST',
5  body: new FormData(form)
6})

Post JSON

1fetch('/users', {
2  method: 'POST',
3  headers: {
4    'Accept': 'application/json',
5    'Content-Type': 'application/json'
6  },
7  body: JSON.stringify({
8    name: 'Hubot',
9    login: 'hubot',
10  })
11})

File upload

1var input = document.querySelector('input[type="file"]')
2
3var data = new FormData()
4data.append('file', input.files[0])
5data.append('user', 'hubot')
6
7fetch('/avatars', {
8  method: 'POST',
9  body: data
10})

###IE6-7 cors

涉及到的参数

jsonpCallbackFunction :  后端生成的函数名, 不传自动生成,与jQuery一致 jsonpCallback: 链接中的名字,不传为callback,与jQuery一致 charset: 设置script的字符集

所有情况下,想跨域,都需要手动设置 credentials: 'include' 所有情况下,如果想发送请求,想带着cookie, 都需要设置 credentials: 'include'

1fetch('/users', { //jsonp!!!
2  credentials: 'include',
3}).then(function(response){
4   return response.json()
5}).then(function(){
6
7})

###使用fetch下载HTML乱码问题

fetch('http://tieba.baidu.com')
    .then(res=> res.blob())
    .then(blob => {
        var reader = new FileReader();
        reader.onload = function(e) {
          var text = reader.result;
          console.log(text)
        }
        reader.readAsText(blob, 'GBK') //或 UTF8,逐个试
    })

更多用法见这里 http://www.w3ctech.com/topic/854