Compare commits
12 Commits
Author | SHA1 | Date |
---|---|---|
yutent | 763792d7f1 | |
yutent | 5b403fb269 | |
yutent | 33e4ffd659 | |
yutent | c286cdf2f2 | |
yutent | 4d97503ee0 | |
yutent | ea757efd31 | |
yutent | 7983cb0b16 | |
yutent | 0735b4452d | |
yutent | 48301ee0ec | |
yutent | 86136434ed | |
yutent | b91477cca9 | |
yutent | ba4717cd8c |
|
@ -1,6 +1,9 @@
|
|||
*.min.js
|
||||
*.min.css
|
||||
|
||||
demo.html
|
||||
.httpserver
|
||||
|
||||
node_modules/
|
||||
dist/
|
||||
|
||||
|
|
19
Readme.md
19
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+ ✔ |
|
||||
|
||||
|
@ -55,7 +55,7 @@ f1('/get_list', {body: {page: 1}})
|
|||
|
||||
### APIs
|
||||
|
||||
#### 1. fetch(url[, options<Object>])
|
||||
#### 1. fetch(url[, options`<Object>`])
|
||||
> 发起一个网络请求, options的参数如下。 同时支持配置公共域名, 公共参数。
|
||||
|
||||
+ method`<String>` 默认GET, 可选GET/POST/PUT/DELETE...
|
||||
|
@ -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<Object>])
|
||||
> 创建一个新的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()
|
||||
})
|
||||
|
||||
```
|
||||
```
|
||||
|
||||
|
||||
### 旧版本
|
||||
|
||||
请查阅 [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,8 +1,8 @@
|
|||
{
|
||||
"name": "@bytedo/fetch",
|
||||
"version": "1.2.0",
|
||||
"version": "2.1.8",
|
||||
"description": "全新的ajax封装。分2个版本, 一个基于XMLHttpRequest, 一个基于window.fetch",
|
||||
"main": "dist/index.js",
|
||||
"main": "dist/next.js",
|
||||
"files": [
|
||||
"dist/*"
|
||||
],
|
||||
|
|
120
src/index.js
120
src/index.js
|
@ -4,7 +4,7 @@
|
|||
* @date 2020/08/03 17:05:10
|
||||
*/
|
||||
|
||||
import { Format, toS } from './lib/format.js'
|
||||
import { Format, getType } from './lib/format.js'
|
||||
|
||||
const NOBODY_METHODS = ['GET', 'HEAD']
|
||||
const FORM_TYPES = {
|
||||
|
@ -25,7 +25,7 @@ const ERRORS = {
|
|||
}
|
||||
|
||||
Promise.defer = function () {
|
||||
var _ = {}
|
||||
let _ = {}
|
||||
_.promise = new Promise(function (y, n) {
|
||||
_.resolve = y
|
||||
_.reject = n
|
||||
|
@ -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
|
||||
}
|
||||
}
|
||||
|
||||
|
@ -56,7 +56,6 @@ class _Request {
|
|||
|
||||
this.options = {
|
||||
headers: {
|
||||
'X-Requested-With': 'XMLHttpRequest',
|
||||
'content-type': FORM_TYPES.form
|
||||
},
|
||||
body: null,
|
||||
|
@ -67,25 +66,20 @@ class _Request {
|
|||
}
|
||||
|
||||
if (!options.signal) {
|
||||
var control = new AbortController()
|
||||
let control = new AbortController()
|
||||
options.signal = control.signal
|
||||
}
|
||||
this.defer.promise.abort = function () {
|
||||
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)
|
||||
|
@ -96,11 +90,10 @@ class _Request {
|
|||
}
|
||||
|
||||
__next__() {
|
||||
var options = this.options
|
||||
var params = null
|
||||
var hasAttach = false // 是否有附件
|
||||
var crossDomain = false // 是否跨域
|
||||
var noBody = NOBODY_METHODS.includes(options.method)
|
||||
let options = this.options
|
||||
let params = null
|
||||
let hasAttach = false // 是否有附件
|
||||
let noBody = NOBODY_METHODS.includes(options.method)
|
||||
|
||||
/* ------------------------ 1»» 处理signal ---------------------- */
|
||||
options.signal.onabort = _ => {
|
||||
|
@ -110,7 +103,7 @@ class _Request {
|
|||
|
||||
/* -------------------------- 2»» 请求的内容 --------------------- */
|
||||
if (options.body) {
|
||||
var type = typeof options.body
|
||||
let type = typeof options.body
|
||||
switch (type) {
|
||||
case 'number':
|
||||
case 'string':
|
||||
|
@ -118,6 +111,11 @@ class _Request {
|
|||
params = options.body
|
||||
break
|
||||
case 'object':
|
||||
let _type = getType(options.body)
|
||||
|
||||
if (_type === 'ArrayBuffer' || _type === 'Uint8Array') {
|
||||
break
|
||||
}
|
||||
// 解析表单DOM
|
||||
if (options.body.nodeName === 'FORM') {
|
||||
options.method = options.body.method.toUpperCase() || 'POST'
|
||||
|
@ -134,11 +132,19 @@ class _Request {
|
|||
params = options.body
|
||||
} else {
|
||||
for (let k in options.body) {
|
||||
if (toS.call(options.body[k]) === '[object File]') {
|
||||
hasAttach = true
|
||||
break
|
||||
if (Array.isArray(options.body[k]) || getType(options.body[k]) === 'FileList') {
|
||||
options.body[k] = Array.from(options.body[k])
|
||||
hasAttach = options.body[k].some(
|
||||
it => getType(it) === 'File' || getType(it) === 'Blob'
|
||||
)
|
||||
} else {
|
||||
if (getType(options.body[k]) === 'File' || getType(options.body[k]) === 'Blob') {
|
||||
hasAttach = true
|
||||
break
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 有附件,则改为FormData
|
||||
if (hasAttach) {
|
||||
if (noBody) {
|
||||
|
@ -150,27 +156,29 @@ class _Request {
|
|||
}
|
||||
}
|
||||
}
|
||||
} else {
|
||||
delete options.headers['content-type']
|
||||
}
|
||||
|
||||
if (hasAttach) {
|
||||
delete options.headers['content-type']
|
||||
}
|
||||
|
||||
/* -------------------------- 3»» 处理跨域 --------------------- */
|
||||
try {
|
||||
let crossDomain
|
||||
let $a = document.createElement('a')
|
||||
$a.href = options.url
|
||||
|
||||
$a.href = options.url
|
||||
crossDomain = location.protocol !== $a.protocol || location.host !== $a.host
|
||||
$a = null
|
||||
} catch (err) {}
|
||||
|
||||
if (crossDomain) {
|
||||
if (options.credentials) {
|
||||
this.xhr.withCredentials = true
|
||||
} else {
|
||||
delete options.headers['X-Requested-With']
|
||||
if (crossDomain) {
|
||||
if (options.credentials) {
|
||||
this.xhr.withCredentials = true
|
||||
}
|
||||
}
|
||||
}
|
||||
} catch (err) {}
|
||||
|
||||
/* ------------- 4»» 根据method类型, 处理表单数据 ---------------- */
|
||||
|
||||
|
@ -178,16 +186,17 @@ class _Request {
|
|||
if (noBody) {
|
||||
params = Format.param(params)
|
||||
if (params) {
|
||||
options.url += (~options.url.indexOf('?') ? '&' : '?') + params
|
||||
options.url += (options.url.includes('?') ? '&' : '?') + params
|
||||
}
|
||||
if (options.cache === 'no-store') {
|
||||
options.url += (~options.url.indexOf('?') ? '&' : '?') + '_t_=' + Date.now()
|
||||
options.url += (options.url.includes('?') ? '&' : '?') + '_t_=' + Date.now()
|
||||
}
|
||||
} else {
|
||||
if (!hasAttach) {
|
||||
if (~options.headers['content-type'].indexOf('json')) {
|
||||
if (options.body && !hasAttach) {
|
||||
if (options.headers['content-type'].includes('json')) {
|
||||
params = JSON.stringify(params)
|
||||
} else {
|
||||
}
|
||||
if (options.headers['content-type'].includes('form')) {
|
||||
params = Format.param(params)
|
||||
}
|
||||
}
|
||||
|
@ -285,17 +294,23 @@ class _Request {
|
|||
}
|
||||
|
||||
__success__(isSucc, result) {
|
||||
var { body, status, statusText, headers } = result
|
||||
var response = new Response(body, { status, statusText, headers })
|
||||
let { body, status, statusText, headers } = result
|
||||
let response = new Response(body, { status, statusText, headers })
|
||||
let _type
|
||||
|
||||
if (this._owner._inject_res) {
|
||||
response = this._owner._inject_res(response)
|
||||
_type = getType(it)(response)
|
||||
}
|
||||
|
||||
if (isSucc) {
|
||||
this.defer.resolve(response)
|
||||
} else {
|
||||
this.defer.reject(response)
|
||||
if (_type === 'Promise') {
|
||||
return response.then(_ => this.defer.reject(_)).catch(_ => this.defer.reject(_))
|
||||
} else {
|
||||
this.defer.reject(response)
|
||||
}
|
||||
}
|
||||
delete this.xhr
|
||||
delete this.options
|
||||
|
@ -303,7 +318,7 @@ class _Request {
|
|||
}
|
||||
|
||||
__cancel__(result) {
|
||||
var response = new Response('', {
|
||||
let response = new Response('', {
|
||||
status: 0,
|
||||
statusText: ERRORS[10100]
|
||||
})
|
||||
|
@ -316,7 +331,7 @@ class _Request {
|
|||
}
|
||||
|
||||
__timeout__(result) {
|
||||
var response = new Response('', {
|
||||
let response = new Response('', {
|
||||
status: 504,
|
||||
statusText: ERRORS[10504]
|
||||
})
|
||||
|
@ -329,18 +344,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 +354,13 @@ function inject(target) {
|
|||
}
|
||||
}
|
||||
}
|
||||
const _fetch = function (url, options) {
|
||||
return new _Request(url, options, _fetch)
|
||||
}
|
||||
|
||||
_fetch.create = function (BASE_URL, __INIT__ = Object.create(null)) {
|
||||
var another = function (url, options) {
|
||||
return new _Request(url, options, { BASE_URL, __INIT__ }, another)
|
||||
_fetch.create = function () {
|
||||
let another = function (url, options) {
|
||||
return new _Request(url, options, another)
|
||||
}
|
||||
inject(another)
|
||||
return another
|
||||
|
|
|
@ -5,17 +5,19 @@
|
|||
*
|
||||
*/
|
||||
|
||||
export const toS = Object.prototype.toString
|
||||
export const encode = encodeURIComponent
|
||||
export const decode = decodeURIComponent
|
||||
|
||||
export function getType(val) {
|
||||
return Object.prototype.toString.call(val).slice(8, -1)
|
||||
}
|
||||
/**
|
||||
* 表单序列化
|
||||
*/
|
||||
function serialize(p, obj, query) {
|
||||
var k
|
||||
let k
|
||||
if (Array.isArray(obj)) {
|
||||
obj.forEach(function(it, i) {
|
||||
obj.forEach(function (it, i) {
|
||||
k = p ? `${p}[${Array.isArray(it) ? i : ''}]` : i
|
||||
if (typeof it === 'object') {
|
||||
serialize(k, it, query)
|
||||
|
@ -82,13 +84,17 @@ export const Format = {
|
|||
mkFormData(data) {
|
||||
let form = new FormData()
|
||||
for (let i in data) {
|
||||
let el = data[i]
|
||||
if (Array.isArray(el)) {
|
||||
el.forEach(function(it) {
|
||||
let val = data[i]
|
||||
if (val === void 0) {
|
||||
val = ''
|
||||
}
|
||||
|
||||
if (Array.isArray(val)) {
|
||||
val.forEach(function (it) {
|
||||
form.append(i + '[]', it)
|
||||
})
|
||||
} else {
|
||||
form.append(i, data[i])
|
||||
form.append(i, val)
|
||||
}
|
||||
}
|
||||
return form
|
||||
|
@ -99,13 +105,19 @@ export const Format = {
|
|||
}
|
||||
|
||||
let arr = []
|
||||
let query = function(k, v) {
|
||||
let query = function (k, v) {
|
||||
if (/native code/.test(v)) {
|
||||
return
|
||||
}
|
||||
|
||||
if (v === void 0) {
|
||||
v = ''
|
||||
}
|
||||
|
||||
let _type = getType(v)
|
||||
|
||||
v = typeof v === 'function' ? v() : v
|
||||
v = toS.call(v) === '[object File]' ? v : encode(v)
|
||||
v = _type === 'File' || _type === 'Blob' ? v : encode(v)
|
||||
|
||||
arr.push(encode(k) + '=' + v)
|
||||
}
|
||||
|
|
123
src/next.js
123
src/next.js
|
@ -4,7 +4,7 @@
|
|||
* @date 2020/07/31 18:59:47
|
||||
*/
|
||||
|
||||
import { Format, toS } from './lib/format.js'
|
||||
import { Format, getType } from './lib/format.js'
|
||||
|
||||
const nativeFetch = window.fetch
|
||||
const NOBODY_METHODS = ['GET', 'HEAD']
|
||||
|
@ -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
|
||||
}
|
||||
}
|
||||
|
||||
|
@ -46,7 +46,6 @@ class _Request {
|
|||
|
||||
this.options = {
|
||||
headers: {
|
||||
'X-Requested-With': 'XMLHttpRequest',
|
||||
'content-type': FORM_TYPES.form
|
||||
},
|
||||
body: null,
|
||||
|
@ -60,18 +59,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)
|
||||
|
@ -81,41 +75,51 @@ class _Request {
|
|||
}
|
||||
|
||||
__next__() {
|
||||
var options = this.options
|
||||
var params = null
|
||||
var hasAttach = false // 是否有附件
|
||||
var crossDomain = false // 是否跨域
|
||||
var noBody = NOBODY_METHODS.includes(options.method)
|
||||
let options = this.options
|
||||
let hasAttach = false // 是否有附件
|
||||
let noBody = NOBODY_METHODS.includes(options.method)
|
||||
|
||||
/* -------------------------- 1»» 请求的内容 --------------------- */
|
||||
if (options.body) {
|
||||
var type = typeof options.body
|
||||
let type = typeof options.body
|
||||
switch (type) {
|
||||
case 'number':
|
||||
case 'string':
|
||||
this.__type__('text')
|
||||
params = options.body
|
||||
break
|
||||
case 'object':
|
||||
let _type = getType(options.body)
|
||||
|
||||
if (_type === 'ArrayBuffer' || _type === 'Uint8Array') {
|
||||
break
|
||||
}
|
||||
|
||||
// 解析表单DOM
|
||||
if (options.body.nodeName === 'FORM') {
|
||||
options.method = options.body.method.toUpperCase() || 'POST'
|
||||
|
||||
params = Format.parseForm(options.body)
|
||||
hasAttach = params.constructor === FormData
|
||||
options.body = Format.parseForm(options.body)
|
||||
hasAttach = options.body.constructor === FormData
|
||||
|
||||
// 如果是一个 FormData对象,且为不允许携带body的方法,则直接改为POST
|
||||
} else if (options.body.constructor === FormData) {
|
||||
hasAttach = true
|
||||
// 修正请求类型
|
||||
if (noBody) {
|
||||
options.method = 'POST'
|
||||
}
|
||||
params = options.body
|
||||
} else {
|
||||
for (let k in options.body) {
|
||||
if (toS.call(options.body[k]) === '[object File]') {
|
||||
hasAttach = true
|
||||
break
|
||||
if (Array.isArray(options.body[k]) || getType(options.body[k]) === 'FileList') {
|
||||
options.body[k] = Array.from(options.body[k])
|
||||
hasAttach = options.body[k].some(
|
||||
it => getType(it) === 'File' || getType(it) === 'Blob'
|
||||
)
|
||||
} else {
|
||||
if (getType(options.body[k]) === 'File' || getType(options.body[k]) === 'Blob') {
|
||||
hasAttach = true
|
||||
break
|
||||
}
|
||||
}
|
||||
}
|
||||
// 有附件,则改为FormData
|
||||
|
@ -123,44 +127,36 @@ class _Request {
|
|||
if (noBody) {
|
||||
options.method = 'POST'
|
||||
}
|
||||
params = Format.mkFormData(options.body)
|
||||
} else {
|
||||
params = options.body
|
||||
options.body = Format.mkFormData(options.body)
|
||||
}
|
||||
}
|
||||
break
|
||||
}
|
||||
} else {
|
||||
delete options.headers['content-type']
|
||||
}
|
||||
|
||||
if (hasAttach) {
|
||||
delete options.headers['content-type']
|
||||
}
|
||||
|
||||
/* -------------------------- 2»» 处理跨域 --------------------- */
|
||||
try {
|
||||
let $a = document.createElement('a')
|
||||
$a.href = options.url
|
||||
|
||||
crossDomain = location.protocol !== $a.protocol || location.host !== $a.host
|
||||
$a = null
|
||||
} catch (err) {}
|
||||
|
||||
if (crossDomain && options.credentials === 'omit') {
|
||||
delete options.headers['X-Requested-With']
|
||||
}
|
||||
|
||||
/* ------------- 3»» 根据method类型, 处理表单数据 ---------------- */
|
||||
|
||||
// 拼接到url上
|
||||
if (noBody) {
|
||||
params = Format.param(params)
|
||||
if (params) {
|
||||
options.url += (~options.url.indexOf('?') ? '&' : '?') + params
|
||||
let tmp = Format.param(options.body)
|
||||
if (tmp) {
|
||||
options.url += (options.url.includes('?') ? '&' : '?') + tmp
|
||||
}
|
||||
delete options.body
|
||||
} else {
|
||||
if (!hasAttach) {
|
||||
if (~options.headers['content-type'].indexOf('json')) {
|
||||
params = JSON.stringify(params)
|
||||
} else {
|
||||
params = Format.param(params)
|
||||
if (options.body && !hasAttach) {
|
||||
if (options.headers['content-type'].includes('json')) {
|
||||
options.body = JSON.stringify(options.body)
|
||||
} else if (options.headers['content-type'].includes('form')) {
|
||||
options.body = Format.param(options.body)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
@ -175,7 +171,7 @@ class _Request {
|
|||
}
|
||||
|
||||
/* ----------------- 5»» 构造请求 ------------------- */
|
||||
var url = options.url
|
||||
let url = options.url
|
||||
delete options.url
|
||||
for (let k in options) {
|
||||
if (options[k] === null || options[k] === undefined || options[k] === '') {
|
||||
|
@ -186,13 +182,19 @@ class _Request {
|
|||
.then(r => {
|
||||
clearTimeout(this.timer)
|
||||
let isSucc = r.status >= 200 && r.status < 400
|
||||
let _type
|
||||
if (this._owner._inject_res) {
|
||||
r = this._owner._inject_res(r)
|
||||
_type = getType(r)
|
||||
}
|
||||
if (isSucc) {
|
||||
return r
|
||||
} else {
|
||||
return Promise.reject(r)
|
||||
if (_type === 'Promise') {
|
||||
return r.then(_ => Promise.reject(_))
|
||||
} else {
|
||||
return Promise.reject(r)
|
||||
}
|
||||
}
|
||||
})
|
||||
.catch(e => {
|
||||
|
@ -210,17 +212,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 +223,13 @@ function inject(target) {
|
|||
}
|
||||
}
|
||||
|
||||
_fetch.create = function (BASE_URL, __INIT__ = Object.create(null)) {
|
||||
var another = function (url, options) {
|
||||
return new _Request(url, options, { BASE_URL, __INIT__ }, another)
|
||||
const _fetch = function (url, options) {
|
||||
return new _Request(url, options, _fetch)
|
||||
}
|
||||
|
||||
_fetch.create = function () {
|
||||
let another = function (url, options) {
|
||||
return new _Request(url, options, another)
|
||||
}
|
||||
inject(another)
|
||||
return another
|
||||
|
|
Loading…
Reference in New Issue