fetch/Readme.md

104 lines
3.4 KiB
Markdown
Raw Permalink Normal View History

2020-07-31 19:01:15 +08:00
## ajax的全新封装
2020-08-07 19:39:28 +08:00
> 统一走fetch的风格。内置参数处理, 支持多实例。
2020-07-31 19:01:15 +08:00
2020-09-27 15:04:46 +08:00
## 浏览器兼容性
2022-03-22 19:36:17 +08:00
![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) |
2020-09-27 15:04:46 +08:00
--- | --- | --- | --- | --- | --- |
Latest ✔ | Latest ✔ | Latest ✔ | Latest ✔ | Latest ✔ | 10+ ✔ |
2020-07-31 19:01:15 +08:00
### 版本
2020-08-07 19:39:28 +08:00
> 共有2个版本, 一个传统版本, 基于`XMLHttpRequest`; 另一个是新一代版本, 基于`window.fetch()`。
2020-07-31 19:01:15 +08:00
2022-03-22 19:14:42 +08:00
**`注意:`**
2020-07-31 19:01:15 +08:00
2020-08-07 19:39:28 +08:00
由于`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
2024-05-06 18:25:59 +08:00
#### 1. fetch(url[, options`<Object>`])
2022-03-22 19:11:35 +08:00
> 发起一个网络请求, options的参数如下。 同时支持配置公共域名, 公共参数。
2020-08-07 19:39:28 +08:00
2022-03-22 19:11:35 +08:00
+ method`<String>` 默认GET, 可选GET/POST/PUT/DELETE...
+ body`<Any>` 要发送的数据, 如果是不允许有`body`的方式, 会被自动拼接到url上
+ cache`<String>` 是否缓存,
+ credentials`<String/Boolean>` 是否校验
+ signal`<Object>` 网络控制信号, 可用于中断请求
+ timeout`<Number>` 超时时间, 默认30秒, 单位毫秒
2020-08-07 19:39:28 +08:00
2022-03-22 19:08:51 +08:00
2020-08-07 19:39:28 +08:00
```js
fetch.BASE_URL = '//192.168.1.100'
2022-03-22 19:04:58 +08:00
// 1.2.0开始支持注入
fetch.inject.request(function(conf) {
// 无需返回值, 但需要注意这是引用类型,不要对带个conf赋值
conf.headers.token = 123456
})
// 响应注入, 需要有返回值
fetch.inject.response(function(res) {
return res.json()
})
2020-08-07 19:39:28 +08:00
```
2022-03-22 19:36:17 +08:00
#### 2. fetch.create()
> 创建一个新的fetch实例, 可以无限创建多个实例(用于同一个项目中有多组不同的接口)。
2022-03-22 19:04:58 +08:00
```js
2022-03-22 19:36:17 +08:00
var another = fetch.create()
another.BASE_URL = '//192.168.1.101'
2022-03-22 19:04:58 +08:00
// 新创建的实例, 也支持注入
another.inject.request(function(conf) {
conf.headers.token = 123456
})
another.inject.response(function(res) {
return res.json()
})
2022-03-22 19:36:17 +08:00
```
### 旧版本
请查阅 [1.x](./Readme%401.x.md)