parent
5b08622e69
commit
ba4717cd8c
17
Readme.md
17
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+ ✔ |
|
Latest ✔ | Latest ✔ | Latest ✔ | Latest ✔ | Latest ✔ | 10+ ✔ |
|
||||||
|
|
||||||
|
@ -68,7 +68,6 @@ f1('/get_list', {body: {page: 1}})
|
||||||
|
|
||||||
```js
|
```js
|
||||||
fetch.BASE_URL = '//192.168.1.100'
|
fetch.BASE_URL = '//192.168.1.100'
|
||||||
fetch.__INIT__ = {headers: {token: 123456}} // 2.x 之后将废弃, 不推荐使用了
|
|
||||||
// 1.2.0开始支持注入
|
// 1.2.0开始支持注入
|
||||||
fetch.inject.request(function(conf) {
|
fetch.inject.request(function(conf) {
|
||||||
// 无需返回值, 但需要注意这是引用类型,不要对带个conf赋值
|
// 无需返回值, 但需要注意这是引用类型,不要对带个conf赋值
|
||||||
|
@ -82,11 +81,12 @@ fetch.inject.response(function(res) {
|
||||||
```
|
```
|
||||||
|
|
||||||
|
|
||||||
#### 2. fetch.create([BASE_URL][, options<Object>])
|
#### 2. fetch.create()
|
||||||
> 创建一个新的fetch实例
|
> 创建一个新的fetch实例, 可以无限创建多个实例(用于同一个项目中有多组不同的接口)。
|
||||||
|
|
||||||
```js
|
```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) {
|
another.inject.request(function(conf) {
|
||||||
conf.headers.token = 123456
|
conf.headers.token = 123456
|
||||||
|
@ -96,4 +96,9 @@ another.inject.response(function(res) {
|
||||||
return res.json()
|
return res.json()
|
||||||
})
|
})
|
||||||
|
|
||||||
```
|
```
|
||||||
|
|
||||||
|
|
||||||
|
### 旧版本
|
||||||
|
|
||||||
|
请查阅 [1.x](./Readme%401.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<Object>])
|
||||||
|
> 发起一个网络请求, options的参数如下。 同时支持配置公共域名, 公共参数。
|
||||||
|
|
||||||
|
+ method`<String>` 默认GET, 可选GET/POST/PUT/DELETE...
|
||||||
|
+ body`<Any>` 要发送的数据, 如果是不允许有`body`的方式, 会被自动拼接到url上
|
||||||
|
+ cache`<String>` 是否缓存,
|
||||||
|
+ credentials`<String/Boolean>` 是否校验
|
||||||
|
+ signal`<Object>` 网络控制信号, 可用于中断请求
|
||||||
|
+ timeout`<Number>` 超时时间, 默认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<Object>])
|
||||||
|
> 创建一个新的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()
|
||||||
|
})
|
||||||
|
|
||||||
|
```
|
|
@ -1,6 +1,6 @@
|
||||||
{
|
{
|
||||||
"name": "@bytedo/fetch",
|
"name": "@bytedo/fetch",
|
||||||
"version": "1.2.0",
|
"version": "2.0.0",
|
||||||
"description": "全新的ajax封装。分2个版本, 一个基于XMLHttpRequest, 一个基于window.fetch",
|
"description": "全新的ajax封装。分2个版本, 一个基于XMLHttpRequest, 一个基于window.fetch",
|
||||||
"main": "dist/index.js",
|
"main": "dist/index.js",
|
||||||
"files": [
|
"files": [
|
||||||
|
|
36
src/index.js
36
src/index.js
|
@ -34,7 +34,7 @@ Promise.defer = function () {
|
||||||
}
|
}
|
||||||
|
|
||||||
class _Request {
|
class _Request {
|
||||||
constructor(url = '', options = {}, { BASE_URL, __INIT__ }, owner) {
|
constructor(url = '', options = {}, owner) {
|
||||||
if (!url) {
|
if (!url) {
|
||||||
throw new Error(ERRORS[10001])
|
throw new Error(ERRORS[10001])
|
||||||
}
|
}
|
||||||
|
@ -42,9 +42,9 @@ class _Request {
|
||||||
// url规范化
|
// url规范化
|
||||||
url = url.replace(/#.*$/, '')
|
url = url.replace(/#.*$/, '')
|
||||||
|
|
||||||
if (BASE_URL) {
|
if (owner.BASE_URL) {
|
||||||
if (!/^([a-z]+:|\/\/)/.test(url)) {
|
if (!/^([a-z]+:|\/\/)/.test(url)) {
|
||||||
url = BASE_URL + url
|
url = owner.BASE_URL + url
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -74,18 +74,13 @@ class _Request {
|
||||||
control.abort()
|
control.abort()
|
||||||
}
|
}
|
||||||
|
|
||||||
let headers = this.options.headers
|
|
||||||
|
|
||||||
if (__INIT__.headers) {
|
|
||||||
Object.assign(headers, __INIT__.headers)
|
|
||||||
}
|
|
||||||
|
|
||||||
if (options.headers) {
|
if (options.headers) {
|
||||||
|
let headers = this.options.headers
|
||||||
Object.assign(headers, 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) {
|
if (owner._inject_req) {
|
||||||
owner._inject_req(this.options)
|
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) {
|
function inject(target) {
|
||||||
target.inject = {
|
target.inject = {
|
||||||
request(callback) {
|
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) {
|
var another = function (url, options) {
|
||||||
return new _Request(url, options, { BASE_URL, __INIT__ }, another)
|
return new _Request(url, options, another)
|
||||||
}
|
}
|
||||||
inject(another)
|
inject(another)
|
||||||
return another
|
return another
|
||||||
|
|
36
src/next.js
36
src/next.js
|
@ -26,7 +26,7 @@ const ERRORS = {
|
||||||
}
|
}
|
||||||
|
|
||||||
class _Request {
|
class _Request {
|
||||||
constructor(url = '', options = {}, { BASE_URL, __INIT__ }, owner) {
|
constructor(url = '', options = {}, owner) {
|
||||||
if (!url) {
|
if (!url) {
|
||||||
throw new Error(ERRORS[10001])
|
throw new Error(ERRORS[10001])
|
||||||
}
|
}
|
||||||
|
@ -34,9 +34,9 @@ class _Request {
|
||||||
// url规范化
|
// url规范化
|
||||||
url = url.replace(/#.*$/, '')
|
url = url.replace(/#.*$/, '')
|
||||||
|
|
||||||
if (BASE_URL) {
|
if (owner.BASE_URL) {
|
||||||
if (!/^([a-z]+:|\/\/)/.test(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
|
options.signal = this.control.signal
|
||||||
}
|
}
|
||||||
|
|
||||||
let headers = this.options.headers
|
|
||||||
|
|
||||||
if (__INIT__.headers) {
|
|
||||||
Object.assign(headers, __INIT__.headers)
|
|
||||||
}
|
|
||||||
|
|
||||||
if (options.headers) {
|
if (options.headers) {
|
||||||
|
let headers = this.options.headers
|
||||||
Object.assign(headers, 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) {
|
if (owner._inject_req) {
|
||||||
owner._inject_req(this.options)
|
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) {
|
function inject(target) {
|
||||||
target.inject = {
|
target.inject = {
|
||||||
request(callback) {
|
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) {
|
var another = function (url, options) {
|
||||||
return new _Request(url, options, { BASE_URL, __INIT__ }, another)
|
return new _Request(url, options, another)
|
||||||
}
|
}
|
||||||
inject(another)
|
inject(another)
|
||||||
return another
|
return another
|
||||||
|
|
Loading…
Reference in New Issue