https://github.com/chinanf-boy/explain-unfetch
explain: unfetch {Bare minimum fetch polyfill in 500 bytes. }🆒 微小fetch
https://github.com/chinanf-boy/explain-unfetch
explain fetch unfetch
Last synced: 5 months ago
JSON representation
explain: unfetch {Bare minimum fetch polyfill in 500 bytes. }🆒 微小fetch
- Host: GitHub
- URL: https://github.com/chinanf-boy/explain-unfetch
- Owner: chinanf-boy
- Created: 2018-01-19T14:48:36.000Z (over 8 years ago)
- Default Branch: master
- Last Pushed: 2018-01-19T14:48:52.000Z (over 8 years ago)
- Last Synced: 2025-02-08T08:47:14.446Z (over 1 year ago)
- Topics: explain, fetch, unfetch
- Homepage:
- Size: 3.91 KB
- Stars: 0
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: readme.md
Awesome Lists containing this project
README
# unfetch
> 超小的 `fetch` polyfill in 500 字节.
[](https://github.com/chinanf-boy/Source-Explain)
Explanation
> "version": "3.0.0"
[github source](https://github.com/developit/unfetch)
~~[english](./README.en.md)~~
---
好了，这么小，只有一个主文件
[src/index.js](./unfetch/src/index.js)
不如先看看例子
[jsfiddle-unfetch-例子](https://jsfiddle.net/developit/qrh7tLc0/)
---
- `ponyfill vs polyfill`
- [index-XMLHttpRequest的设置](#index)
- [response-数据的处理](#response)
- ~~[npm-run-关于这个项目的配置与构建](./npm-run.readme.md)~~
---
## ponyfill vs polyfill
作为 [ponyfill](https://ponyfill.com/): 只使用`unfetch`
``` js
import fetch from 'unfetch';
fetch('/foo.json')
.then( r => r.json() )
.then( data => {
console.log(data);
});
```
全局, 作为 [polyfill](https://ponyfill.com/#polyfill): 如果有原生，用原生，没有则用`unfetch`
``` js
import 'unfetch/polyfill';
// "fetch" 已经加载了，如果不存在的话
fetch('/foo.json')
.then( r => r.json() )
.then( data => {
console.log(data);
});
```
> `要`，还是`不要`《-🌟-》原生api，这是一个问题
---
例子-jsfiddle
``` js
unfetch('//jsonplaceholder.typicode.com/posts', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({
title: 'foo',
body: 'bar',
userId: 1
})
})
.then( r => r.json() )
.then( data => {
log(data);
unfetch('//jsonplaceholder.typicode.com/posts/1')
.then( r => r.json() )
.then( log )
});
```
## index
``` js
export default typeof fetch=='function' ? fetch.bind() // fetch.bind() ,使用原生
: function(url, options) {
options = options || {};
return new Promise( (resolve, reject) => { // 增加 Promise --> async/await
let request = new XMLHttpRequest();
request.open(options.method || 'get', url, true);
for (let i in options.headers) {
// headers: { 'Content-Type': 'application/json' },
request.setRequestHeader(i, options.headers[i]); // 设置请求-头 ---- 1
}
request.withCredentials = options.credentials=='include'; // ----- 2
request.onload = () => { // --- 3
resolve(response()); // 获取-函数触发
};
request.onerror = reject; // --- 4
request.send(options.body); // --- 5
// body: JSON.stringify({
// title: 'foo',
// body: 'bar',
// userId: 1
// })
// ---- 获取数据后，函数运行
function response() {
// ...
}
});
}
```
1. `request.setRequestHeader`
> 给指定的HTTP请求头赋值.
2. `request.withCredentials`
> 表明在进行跨站(cross-site)的访问控制(Access-Control)请求时，是否使用认证信息(例如cookie或授权的header)。 默认为 false。
3. `request.onload`
> 当一个资源及其依赖资源已完成加载时，将触发load事件。[mdn文档](https://developer.mozilla.org/zh-CN/docs/Web/Events/load)
4. `request.onerror`
> 当一个资源加载失败时会触发error事件。[mdn文档](https://developer.mozilla.org/zh-CN/docs/Web/Events/error)
5. `request.send`
> 发送请求. 如果该请求是异步模式(默认),该方法会立刻返回. 相反,如果请求是同步模式,则直到请求的响应完全接受以后,该方法才会返回.
[有关-XMLHttpRequest-更多](https://developer.mozilla.org/zh-CN/docs/Web/API/XMLHttpRequest)
---
## response
``` js
request.onload = () => { // --- 3
resolve(response()); // 获取-函数触发
};
```
数据获取后，`response` 触发
``` js
function response() {
let keys = [],
all = [],
headers = {},
header;
request.getAllResponseHeaders().replace(/^(.*?):\s*?([\s\S]*?)$/gm, (m, key, value) => {
keys.push(key = key.toLowerCase()); // 所有 key
all.push([key, value]); //
header = headers[key];
headers[key] = header ? `${header},${value}` : value;
});
return {
ok: (request.status/100|0) == 2, // 200-299
status: request.status,
statusText: request.statusText,
url: request.responseURL,
clone: response,
text: () => Promise.resolve(request.responseText),
json: () => Promise.resolve(request.responseText).then(JSON.parse),
blob: () => Promise.resolve(new Blob([request.response])),
headers: {
keys: () => keys,
entries: () => all,
get: n => headers[n.toLowerCase()],
has: n => n.toLowerCase() in headers
}
};
}
```
- `getAllResponseHeaders`
> 返回所有响应头信息(响应头名和值), 如果响应头还没接受,则返回null.
> 注意: For multipart requests, this returns the headers from the current part of the request, not from the original channel.
---
> 返回的对象-解释
1. ok
> : 是否成功 2==ok
2. status
>: 状态
3. statusText
> 该请求的响应状态信息,包含一个状态码和原因短语 (例如 "200 OK"). 只读.
4. url
> 该请求所要访问的URL
5. clone
> 本函数
6. text : `function`
> 返回异步-获取-「`String`类型」数据
7. json : `function`
> 返回异步-获取-「`JSON`格式」数据
8. blob : `function`
> 返回异步-获取-「`Blob`格式」数据
9. headers : `object`
- keys : `function`
> 返回 `[]` - `[key, key1,...]` 请求头
- entries : `function`
> 返回 `[]` - `[[key, value],[key1, value1,..]` 请求头
- get : `function(n)`
> 返回 `string` headers[n] 请求头
- has : `function`
> 返回 `Boolean`,是否在请求头
---
##