From ba4717cd8cd06f2183aef4b99d9e3c81a042f8fc Mon Sep 17 00:00:00 2001 From: yutent Date: Tue, 22 Mar 2022 19:36:17 +0800 Subject: [PATCH] =?UTF-8?q?=E5=BA=9F=E5=BC=83=5F=5FINI=5F=5F=E6=96=B9?= =?UTF-8?q?=E5=BC=8F=E6=B3=A8=E5=85=A5?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- Readme.md | 17 +++++---- Readme@1.x.md | 99 +++++++++++++++++++++++++++++++++++++++++++++++++++ package.json | 2 +- src/index.js | 36 ++++++------------- src/next.js | 36 +++++++------------ 5 files changed, 134 insertions(+), 56 deletions(-) create mode 100644 Readme@1.x.md diff --git a/Readme.md b/Readme.md index 43d7108..2623a86 100644 --- a/Readme.md +++ b/Readme.md @@ -4,7 +4,7 @@ ## 浏览器兼容性 -![Chrome](https://raw.github.com/alrra/browser-logos/master/src/chrome/chrome_48x48.png) | ![Firefox](https://raw.github.com/alrra/browser-logos/master/src/firefox/firefox_48x48.png) | ![Safari](https://raw.github.com/alrra/browser-logos/master/src/safari/safari_48x48.png) | ![Opera](https://raw.github.com/alrra/browser-logos/master/src/opera/opera_48x48.png) | ![Edge](https://raw.githubusercontent.com/alrra/browser-logos/master/src/edge/edge_48x48.png) | ![IE](https://raw.githubusercontent.com/alrra/browser-logos/master/src/archive/internet-explorer_9-11/internet-explorer_9-11_48x48.png) | +![Chrome](https://raw.githubusercontent.com/alrra/browser-logos/master/src/chrome/chrome_48x48.png) | ![Firefox](https://raw.githubusercontent.com/alrra/browser-logos/master/src/firefox/firefox_48x48.png) | ![Safari](https://raw.githubusercontent.com/alrra/browser-logos/master/src/safari/safari_48x48.png) | ![Opera](https://raw.githubusercontent.com/alrra/browser-logos/master/src/opera/opera_48x48.png) | ![Edge](https://raw.githubusercontent.com/alrra/browser-logos/master/src/edge/edge_48x48.png) | ![IE](https://raw.githubusercontent.com/alrra/browser-logos/master/src/archive/internet-explorer_9-11/internet-explorer_9-11_48x48.png) | --- | --- | --- | --- | --- | --- | Latest ✔ | Latest ✔ | Latest ✔ | Latest ✔ | Latest ✔ | 10+ ✔ | @@ -68,7 +68,6 @@ f1('/get_list', {body: {page: 1}}) ```js fetch.BASE_URL = '//192.168.1.100' -fetch.__INIT__ = {headers: {token: 123456}} // 2.x 之后将废弃, 不推荐使用了 // 1.2.0开始支持注入 fetch.inject.request(function(conf) { // 无需返回值, 但需要注意这是引用类型,不要对带个conf赋值 @@ -82,11 +81,12 @@ fetch.inject.response(function(res) { ``` -#### 2. fetch.create([BASE_URL][, options]) -> 创建一个新的fetch实例 +#### 2. fetch.create() +> 创建一个新的fetch实例, 可以无限创建多个实例(用于同一个项目中有多组不同的接口)。 ```js -var another = fetch.create('//192.168.1.101') +var another = fetch.create() +another.BASE_URL = '//192.168.1.101' // 新创建的实例, 也支持注入 another.inject.request(function(conf) { conf.headers.token = 123456 @@ -96,4 +96,9 @@ another.inject.response(function(res) { return res.json() }) -``` \ No newline at end of file +``` + + +### 旧版本 + +请查阅 [1.x](./Readme%401.x.md) \ No newline at end of file diff --git a/Readme@1.x.md b/Readme@1.x.md new file mode 100644 index 0000000..ceb27be --- /dev/null +++ b/Readme@1.x.md @@ -0,0 +1,99 @@ +## ajax的全新封装 +> 统一走fetch的风格。内置参数处理, 支持多实例。 + + +## 浏览器兼容性 + +![Chrome](https://raw.githubusercontent.com/alrra/browser-logos/master/src/chrome/chrome_48x48.png) | ![Firefox](https://raw.githubusercontent.com/alrra/browser-logos/master/src/firefox/firefox_48x48.png) | ![Safari](https://raw.githubusercontent.com/alrra/browser-logos/master/src/safari/safari_48x48.png) | ![Opera](https://raw.githubusercontent.com/alrra/browser-logos/master/src/opera/opera_48x48.png) | ![Edge](https://raw.githubusercontent.com/alrra/browser-logos/master/src/edge/edge_48x48.png) | ![IE](https://raw.githubusercontent.com/alrra/browser-logos/master/src/archive/internet-explorer_9-11/internet-explorer_9-11_48x48.png) | +--- | --- | --- | --- | --- | --- | +Latest ✔ | Latest ✔ | Latest ✔ | Latest ✔ | Latest ✔ | 10+ ✔ | + + +### 版本 +> 共有2个版本, 一个传统版本, 基于`XMLHttpRequest`; 另一个是新一代版本, 基于`window.fetch()`。 + +**`注意:`** + +由于`window.fetch()`只支持`http/https`协议, 所以在一些特殊的环境下(如electron等), 请使用传统版。 + +### 2个版本的区别 + +1. 超时的返回值不一样。fetch版没有额外处理, 全由原生返回; 传统版为处理过, 统一返回`Response对象`。 + +2. 缓存参数不一致, 传统版只有传入`no-store`才不会缓存,其他任何值都会缓存, 缓存机制由headers及浏览器机制决定。 fetch版支持完整的参数, 详见原生fetch文档。 + +3. 验证机制,传参不一样。传统版credentials为布尔值; fetch版本则是支持omit, same-origin, include。 + + +### 示例 + +```js +import fetch from '//dist.bytedo.org/fetch/dist/index.js' // 传统版 +// import fetch from '//dist.bytedo.org/fetch/dist/next.js' // fetch版 + + +fetch('/get_list', {body: {page: 1}}) + .then(r => r.json()) + .then(list => { + console.log(list) + }) + + +// 创建一个新的fetch实例, 可传入新的基础域名, 和公共参数等 +var f1 = fetch.create('//192.168.1.101', {headers: {token: 123456}}) + +f1('/get_list', {body: {page: 1}}) + .then(r => r.json()) + .then(list => { + console.log(list) + }) + + +``` + + + +### APIs + +#### 1. fetch(url[, options]) +> 发起一个网络请求, options的参数如下。 同时支持配置公共域名, 公共参数。 + + + method`` 默认GET, 可选GET/POST/PUT/DELETE... + + body`` 要发送的数据, 如果是不允许有`body`的方式, 会被自动拼接到url上 + + cache`` 是否缓存, + + credentials`` 是否校验 + + signal`` 网络控制信号, 可用于中断请求 + + timeout`` 超时时间, 默认30秒, 单位毫秒 + + +```js +fetch.BASE_URL = '//192.168.1.100' +fetch.__INIT__ = {headers: {token: 123456}} // 2.x 之后将废弃, 不推荐使用了 +// 1.2.0开始支持注入 +fetch.inject.request(function(conf) { + // 无需返回值, 但需要注意这是引用类型,不要对带个conf赋值 + conf.headers.token = 123456 +}) + +// 响应注入, 需要有返回值 +fetch.inject.response(function(res) { + return res.json() +}) +``` + + +#### 2. fetch.create([BASE_URL][, options]) +> 创建一个新的fetch实例, 可以无限创建多个实例(用于同一个项目中有多组不同的接口)。 + +```js +var another = fetch.create('//192.168.1.101') +// 新创建的实例, 也支持注入 +another.inject.request(function(conf) { + conf.headers.token = 123456 +}) + +another.inject.response(function(res) { + return res.json() +}) + +``` \ No newline at end of file diff --git a/package.json b/package.json index c1302d4..9f02a26 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "@bytedo/fetch", - "version": "1.2.0", + "version": "2.0.0", "description": "全新的ajax封装。分2个版本, 一个基于XMLHttpRequest, 一个基于window.fetch", "main": "dist/index.js", "files": [ diff --git a/src/index.js b/src/index.js index 01aee11..2463bfa 100644 --- a/src/index.js +++ b/src/index.js @@ -34,7 +34,7 @@ Promise.defer = function () { } class _Request { - constructor(url = '', options = {}, { BASE_URL, __INIT__ }, owner) { + constructor(url = '', options = {}, owner) { if (!url) { throw new Error(ERRORS[10001]) } @@ -42,9 +42,9 @@ class _Request { // url规范化 url = url.replace(/#.*$/, '') - if (BASE_URL) { + if (owner.BASE_URL) { if (!/^([a-z]+:|\/\/)/.test(url)) { - url = BASE_URL + url + url = owner.BASE_URL + url } } @@ -74,18 +74,13 @@ class _Request { control.abort() } - let headers = this.options.headers - - if (__INIT__.headers) { - Object.assign(headers, __INIT__.headers) - } - if (options.headers) { + let headers = this.options.headers Object.assign(headers, options.headers) - delete options.headers + options.headers = headers } - Object.assign(this.options, __INIT__, options, { url, headers }) + Object.assign(this.options, options, { url }) if (owner._inject_req) { owner._inject_req(this.options) @@ -329,18 +324,6 @@ class _Request { } } -const _fetch = function (url, options) { - return new _Request( - url, - options, - { - BASE_URL: _fetch.BASE_URL, - __INIT__: _fetch.__INIT__ || Object.create(null) - }, - _fetch - ) -} - function inject(target) { target.inject = { request(callback) { @@ -351,10 +334,13 @@ function inject(target) { } } } +const _fetch = function (url, options) { + return new _Request(url, options, _fetch) +} -_fetch.create = function (BASE_URL, __INIT__ = Object.create(null)) { +_fetch.create = function () { var another = function (url, options) { - return new _Request(url, options, { BASE_URL, __INIT__ }, another) + return new _Request(url, options, another) } inject(another) return another diff --git a/src/next.js b/src/next.js index 291f842..63a3659 100644 --- a/src/next.js +++ b/src/next.js @@ -26,7 +26,7 @@ const ERRORS = { } class _Request { - constructor(url = '', options = {}, { BASE_URL, __INIT__ }, owner) { + constructor(url = '', options = {}, owner) { if (!url) { throw new Error(ERRORS[10001]) } @@ -34,9 +34,9 @@ class _Request { // url规范化 url = url.replace(/#.*$/, '') - if (BASE_URL) { + if (owner.BASE_URL) { if (!/^([a-z]+:|\/\/)/.test(url)) { - url = BASE_URL + url + url = owner.BASE_URL + url } } @@ -60,18 +60,13 @@ class _Request { options.signal = this.control.signal } - let headers = this.options.headers - - if (__INIT__.headers) { - Object.assign(headers, __INIT__.headers) - } - if (options.headers) { + let headers = this.options.headers Object.assign(headers, options.headers) - delete options.headers + options.headers = headers } - Object.assign(this.options, __INIT__, options, { url, headers }) + Object.assign(this.options, options, { url }) if (owner._inject_req) { owner._inject_req(this.options) @@ -210,17 +205,6 @@ class _Request { } } -const _fetch = function (url, options) { - return new _Request( - url, - options, - { - BASE_URL: _fetch.BASE_URL, - __INIT__: _fetch.__INIT__ || Object.create(null) - }, - _fetch - ) -} function inject(target) { target.inject = { request(callback) { @@ -232,9 +216,13 @@ function inject(target) { } } -_fetch.create = function (BASE_URL, __INIT__ = Object.create(null)) { +const _fetch = function (url, options) { + return new _Request(url, options, _fetch) +} + +_fetch.create = function () { var another = function (url, options) { - return new _Request(url, options, { BASE_URL, __INIT__ }, another) + return new _Request(url, options, another) } inject(another) return another