1.0.5 • Published 6 years ago
nb-fetch v1.0.5
fetch2
一个更加简洁的fetch库。
- 支持 GET,POST,PUT,DELETE,HEAD,PATCH。
- 支持文件上传。
- 支持请求/响应拦截器。
- 支持async/await,promise。
代码近期重构调整,请使用npm 的版本
use
npm install -S nb-fetch
var fetch2 = require('nb-fetch')
因为
fetch2
包名被占用了,所以取名为nb-fetch
,node-browser-fetch
简写。
如果你是node端使用,还需另外安装 node-fetch
,form-data
两个依赖。
var fetch = require('node-fetch')
var FormData = require('form-data')
var fetch2 = require('../dist/fetch2')
// 初始化指定fetch,与FormData
fetch2.init(fetch, FormData)
// do...
或者
const fetch = require('nb-fetch/fetch')
api
Fetch2.prototype.init(fetch, FormData) 初始化,node环境必须。
Fetch2.prototype.get(url, options) GET 请求,返回Promise对象。
- Fetch2.prototype.post(url, options) POST 请求,返回Promise对象。
- Fetch2.prototype.put(url, options) PUT 请求,返回Promise对象。
- Fetch2.prototype.delete(url, options) DELETE 请求,返回Promise对象。
- Fetch2.prototype.head(url, options) HEAD 请求,返回Promise对象。
Fetch2.prototype.patch(url, options) PATCH 请求,返回Promise对象。
Fetch2.prototype.request 请求拦截器。
- Fetch2.prototype.response 响应拦截器。
- Fetch2.prototype.fetch(uri, method, options) fetch。
- Fetch2.prototype.Fetch2 返回Fetch2对象,可用于创建全新的fetch2对象。
options
- method: 请求使用的方法,如 GET、POST、PUT、PATH、DELETE
- headers: 请求的头信息,形式为 Headers 对象或 ByteString。
- body: 请求的 body 信息:可能是一个 Blob、BufferSource、FormData、URLSearchParams 或者 USVString 对象。注意 GET 或 HEAD 方法的请求不能包含 body 信息。
- mode: 请求的模式,如 cors、 no-cors 或者 same-origin。
- credentials: 请求的 credentials,如 omit、same-origin 或者 include。
cache: 请求的 cache 模式: default, no-store, reload, no-cache, force-cache, or only-if-cached.
type: 响应类型;json,text,blob,arrayBuffer 默认json
- params: query参数对象;key/val支持多层次
例子
// GET
fetch2.get(url).then(res => {
console.log(res.data)
})
// POST
fetch2.post(url, {
body: {
name: 'admin',
pass: '123456'
}
}).then(res => {
console.log(res.data)
})
node
node环境不存在 fetch
,FormData
对象,所以需要安装 node-fetch
,form-data
两个依赖。
npm install -S node-fetch
npm install -S form-data
var fetch = require('node-fetch')
var FormData = require('form-data')
var fetch2 = require('../dist/fetch2')
// 初始化指定fetch,与FormData
fetch2.init(fetch, FormData)
fetch2.get('http://localhost/api').then(res => {
console.log(res)
})
async/await
fetch2 http请求的内部封装返回的都是Promise,所以支持async/await模式。
var res = await fetch2.get(url)
拦截器
请求拦截
fetch2.request.use(fn)
fetch2.request.use((req, next) => {
// do
next()
})
响应拦截
fetch2.response.use(fn)
fetch2.response.use((req, next) => {
// do
next()
})
fetch2默认导出的是一个已经new过的Fetch2对象,所以,如果需要重新创建全新的fetch2可以这样
var fetch21 = new Fetch2()
注:每个fetch2对象的拦截器都是互不干扰的
polyfill
如果你使用的是现代浏览器,只要引入脚本即可无需做兼容
<script type="text/javascript" src="../dist/fetch2.js"></script>
在低版本浏览器,需要 fetch
,promise
垫片。
例如: ie9+浏览器兼容
<!-- for ie9+ -->
<script src="https://cdn.bootcss.com/fetch/2.0.3/fetch.min.js"></script>
<script src="https://cdn.bootcss.com/es6-promise/4.1.1/es6-promise.auto.min.js"></script>
<script type="text/javascript" src="../dist/fetch2.js"></script>
在 window
挂载的对象为 fetch2