{"id":19916846,"url":"https://github.com/rubylouvre/fetch-polyfill","last_synced_at":"2025-08-19T16:32:58.388Z","repository":{"id":57234661,"uuid":"65292777","full_name":"RubyLouvre/fetch-polyfill","owner":"RubyLouvre","description":"fetch polyfill which supports all mainstream browsers, even  IE6, IE7, IE8.....","archived":false,"fork":false,"pushed_at":"2017-07-19T14:13:12.000Z","size":159,"stargazers_count":150,"open_issues_count":3,"forks_count":20,"subscribers_count":8,"default_branch":"master","last_synced_at":"2024-12-13T09:36:05.931Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/RubyLouvre.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2016-08-09T12:22:05.000Z","updated_at":"2023-10-29T00:02:51.000Z","dependencies_parsed_at":"2022-09-15T04:42:00.527Z","dependency_job_id":null,"html_url":"https://github.com/RubyLouvre/fetch-polyfill","commit_stats":null,"previous_names":[],"tags_count":2,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/RubyLouvre%2Ffetch-polyfill","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/RubyLouvre%2Ffetch-polyfill/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/RubyLouvre%2Ffetch-polyfill/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/RubyLouvre%2Ffetch-polyfill/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/RubyLouvre","download_url":"https://codeload.github.com/RubyLouvre/fetch-polyfill/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":230364001,"owners_count":18214717,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-11-12T21:47:48.481Z","updated_at":"2024-12-19T02:07:26.168Z","avatar_url":"https://github.com/RubyLouvre.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# fetch-polyfill\nfetch polyfill which supports all mainstream browsers, even  IE6, IE7, IE8.....\n\n```\n$ npm install fetch-polyfill2 --save\n$ npm install bluebird -- save\n$ npm install json3 -- save\n```\n\n### HTML\n\n```html\n\u003cscript src='path-to-node_modules/bulebird/bluebird.js' \u003e\u003c/script\u003e\n\u003c!--or other promise polyfill library--\u003e\n\u003cscript src='path-to-node_modules/json3/json3.js' \u003e\u003c/script\u003e\n\u003cscript src='path-to-node_modules/fetch-polyfill2/dist/index.js' \u003e\u003c/script\u003e\n\u003cscript\u003e\nfetch('/users.html')\n  .then(function(response) {\n    return response.text()\n  }).then(function(body) {\n    document.body.innerHTML = body\n  })\n\u003c/script\u003e\n```\n\n\u003eIt is strongly recommended that these three libraries be packaged together with webpack\n\n\n![](flow.jpg)\n\n### JSON\n\n```javascript\nfetch('/users.json')\n  .then(function(response) {\n    return response.json()\n  }).then(function(json) {\n    console.log('parsed json', json)\n  }).catch(function(ex) {\n    console.log('parsing failed', ex)\n  })\n```\n\n### Response metadata\n\n```javascript\nfetch('/users.json').then(function(response) {\n  console.log(response.headers.get('Content-Type'))\n  console.log(response.headers.get('Date'))\n  console.log(response.status)\n  console.log(response.statusText)\n})\n```\n\n### Post form\n\n```javascript\nvar form = document.querySelector('form')\n\nfetch('/users', {\n  method: 'POST',\n  body: new FormData(form)\n})\n```\n\n### Post JSON\n\n```javascript\nfetch('/users', {\n  method: 'POST',\n  headers: {\n    'Accept': 'application/json',\n    'Content-Type': 'application/json'\n  },\n  body: JSON.stringify({\n    name: 'Hubot',\n    login: 'hubot',\n  })\n})\n```\n\n### File upload\n\n```javascript\nvar input = document.querySelector('input[type=\"file\"]')\n\nvar data = new FormData()\ndata.append('file', input.files[0])\ndata.append('user', 'hubot')\n\nfetch('/avatars', {\n  method: 'POST',\n  body: data\n})\n```\n\n###IE6-7 cors\n\n涉及到的参数\n\njsonpCallbackFunction :  后端生成的函数名, 不传自动生成,与jQuery一致\njsonpCallback: 链接中的名字,不传为`callback`,与jQuery一致\ncharset: 设置script的字符集\n\n\u003e所有情况下,想跨域,都需要手动设置 credentials: 'include'\n\u003e所有情况下,如果想发送请求,想带着cookie, 都需要设置  credentials: 'include'\n\n\n\n```javascript\nfetch('/users', { //jsonp!!!\n  credentials: 'include',\n}).then(function(response){\n   return response.json()\n}).then(function(){\n\n})\n```\n\n###使用fetch下载HTML乱码问题\n\n```\nfetch('http://tieba.baidu.com')\n    .then(res=\u003e res.blob())\n    .then(blob =\u003e {\n        var reader = new FileReader();\n        reader.onload = function(e) {\n          var text = reader.result;\n          console.log(text)\n        }\n        reader.readAsText(blob, 'GBK') //或 UTF8,逐个试\n    })\n```\n\n更多用法见这里 http://www.w3ctech.com/topic/854","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Frubylouvre%2Ffetch-polyfill","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Frubylouvre%2Ffetch-polyfill","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Frubylouvre%2Ffetch-polyfill/lists"}