fetch必然要替换XMLHttpRequest，所以是时候尝试 fetch (opens new window) 了；- 本封装仅针对npm引入；
- 本封装依赖 es6-promise (opens new window) 和 whatwg-fetch (opens new window)，分别对
promise和fetch进行兼容性处理； - 还有一种兼容性处理是依赖 es6-promise (opens new window) 和isomorphic-fetch (opens new window) ，但是看它的源码就会发现，
isomorphic-fetch只不过是引用了whatwg-fetch，并没有做二次开发，isomorphic-fetch只是将fetch添加为全局，以便其API在客户端和服务器之间保持一致，所以没必要。
# 封装的主要内容
fetch的请求方式同$ajax和axios都不太一样，并且它本身的get请求同其他请求对数据的处理和herder也不太相同，所以为了统一请求行为，方便请求过程，将请求过程进行封装；fetch请求的结果均返回到.then()中，但是平时的习惯是是在.then()中处理正确结果，.catch()中处理错误，所以对请求结果进行统一处理；fetch本身没有 请求超时 这个概念，所以通过Promise.race来处理，它的作用是多个promise同时运行，返回的结果以最快返回结果的那个promise的值为准。
Fetch for browser.
# Install
$ npm isntall reco-fetch
1
# Including reco-fetch
# Script tag
<script src="/node_modules/reco-fetch/dist/recoFetch.min.js"></script>
1
# Import
import recoFetch from 'reco-fetch'
1
# Config
In addition to the parameters given below, please combine other parameters MDN (opens new window).
/**
* @param {String, must} url API URL
* @param {String, must} options Parameter objects, including:
* method {String, optional} Request method, default 'get'
* headers {Object, optional} Set request header
* params {Object, optional} url parameters
* body {Object, optional} request body
* timeout {Number, optional} Request timeout
* type {String, optional} When 'post' requests, you can set: 'json', 'formData'
*/
const options = {
method: 'post',
headers: {},
timeout: 1000,
body: {
id: 1,
value: 2
}
}
recoFetch(url, options). then(res => {
console.log(res)
}).catch(err => {
console.log(err)
})
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
# Example
# GET
const options = {
method: 'get',
params: {
key: 1,
value: 2
}
}
recoFetch(url, options). then(res => {
console.log(res)
}).catch(err => {
console.log(err)
})
1
2
3
4
5
6
7
8
9
10
11
12
13
2
3
4
5
6
7
8
9
10
11
12
13
# POST JSON
const options = {
method: 'post',
body: {
key: 1,
value: 2
},
type: 'json'
}
recoFetch(url, options). then(res => {
console.log(res)
}).catch(err => {
console.log(err)
})
1
2
3
4
5
6
7
8
9
10
11
12
13
14
2
3
4
5
6
7
8
9
10
11
12
13
14
POST formData
const options = {
method: 'post',
body: {
key: 1,
value: 2
},
type: 'formData'
}
// or
const form = document.querySelector('form')
const options = {
method: 'post',
body: form
}
recoFetch(url, options). then(res => {
console.log(res)
}).catch(err => {
console.log(err)
})
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
# PUT
const options = {
method: 'put',
body: {
key: 1,
value: 2
},
type: 'json'
}
// or
const options = {
method: 'put',
body: JSON.stringify({
key: 1,
value: 2
})
}
recoFetch(url, options). then(res => {
console.log(res)
}).catch(err => {
console.log(err)
})
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
# DELETE
const options = {
method: 'delete',
params: {
key: 1,
value: 2
}
}
recoFetch(url, options). then(res => {
console.log(res)
}).catch(err => {
console.log(err)
})
1
2
3
4
5
6
7
8
9
10
11
12
13
2
3
4
5
6
7
8
9
10
11
12
13
# uploadFile
const fileField = document.querySelector("input[type='file']")
const options = {
method: 'post',
body: {
file: fileField.files[0]
},
type: 'formData'
}
// or
const formData = new FormData()
const fileField = document.querySelector("input[type='file']")
formData.append('file', fileField.files[0])
const options = {
method: 'post',
body: formData
}
recoFetch(url, options). then(res => {
console.log(res)
}).catch(err => {
console.log(err)
})
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
# License
如果觉得还可以，欢迎给个 Star (opens new window)