@0y0/request 中文文档教程
@0y0/request ·
@0y0/request
是一个微型 window.fetch 包装器,试图使 HTTP 请求代码更具可读性和可读性更容易写。
Before
fetch('/users/1', {
method: 'PUT',
headers: {
'Content-Type': 'application/json'
'Authorization': 'Bearer this-is-user-token'
},
body: JSON.stringify({
email: 'foo@gmail.com',
name: 'bar'
})
}).then(handleResponse, handleError)
After
Request
.post('/users/1')
.bearer('this-is-user-token')
.jsonBody({ email: 'foo@gmail.com', name: 'bar' })
.then(handleResponse, handleError)
Installation
npm install @0y0/request --save
import Request from '@0y0/request'
作为使用 npm 的替代方法,您可以使用 @0y0/request
作为 标签,来自 CDN。 您还需要 Promise polyfill 和 fetch用于旧浏览器的 polyfill(检查兼容性 caniuse/Promises 和 caniuse/fetch)。
<!--
Use promise-polyfill and whatwg-fetch only if you want to support old browsers.
Check out Promise and fetch compatibility at http://caniuse.com.
-->
<script src="https://unpkg.com/promise-polyfill"></script>
<script src="https://unpkg.com/whatwg-fetch"></script>
<script src="https://unpkg.com/@0y0/request/dist/request.min.js"></script>
<script>Request.get('http://...')</script>
Usage
Send a request
Reqeust.get('/api')
Reqeust.post('/api')
Reqeust.put('/api')
Reqeust.delete('/api')
Set HTTP header
// headers: { foo: 'bar' }
Request.get('/api').header('foo', 'bar')
// headers: { Authorization: 'bar' }
Request.get('/api').auth('bar')
// headers: { Authorization: 'Bearer token' }
Request.get('/api').bearer('token')
// headers: { foo1: 'bar1', Authorization: 'token' }
Request.get('/api')
.header('foo1', 'bar1')
.header('foo2', undefined)
.auth('token')
Set URL parameters
// url: /api/?foo=bar
Request.get('/api').param('foo', 'bar')
// url: /api/?foo2=bar2
Request.get('/api').param('foo1', undefined).param('foo2', 'bar2')
// url: /api/?foo1=bar1&foo2=bar2
Request.get('/api').params({ foo1: 'bar1', foo2: 'bar2' })
Set request body
Request.post('/api').body('content')
// Content-Type: application/json
Request.post('/api').jsonBody({ foo: 'bar' })
// Content-Type: multipart/form-data
Request.post('/api').formBody({ foo: 'bar' })
// Content-Type: application/x-www-form-urlencoded;charset=UTF-8
Request.post('/api').urlencodedFormBody({ foo: 'bar' })
Handle JSON response
Request.get('/api').acceptJson()
Browser Support
- Chrome
- Firefox
- Safari 10.1+
- IE 10+ (Should use with Promise, fetch, URL, URLSearchParams and FormData polyfills)
License
@0y0/request ·
@0y0/request
is a tiny window.fetch wrapper tried to make HTTP request code more readable and more easy to write.
Before
fetch('/users/1', {
method: 'PUT',
headers: {
'Content-Type': 'application/json'
'Authorization': 'Bearer this-is-user-token'
},
body: JSON.stringify({
email: 'foo@gmail.com',
name: 'bar'
})
}).then(handleResponse, handleError)
After
Request
.post('/users/1')
.bearer('this-is-user-token')
.jsonBody({ email: 'foo@gmail.com', name: 'bar' })
.then(handleResponse, handleError)
Installation
npm install @0y0/request --save
import Request from '@0y0/request'
As an alternative to using npm, you can use @0y0/request
as a <script>
tag from a CDN. You will also need Promise polyfill and fetch polyfill for old browsers (Check out compatibility at caniuse/Promises and caniuse/fetch).
<!--
Use promise-polyfill and whatwg-fetch only if you want to support old browsers.
Check out Promise and fetch compatibility at http://caniuse.com.
-->
<script src="https://unpkg.com/promise-polyfill"></script>
<script src="https://unpkg.com/whatwg-fetch"></script>
<script src="https://unpkg.com/@0y0/request/dist/request.min.js"></script>
<script>Request.get('http://...')</script>
Usage
Send a request
Reqeust.get('/api')
Reqeust.post('/api')
Reqeust.put('/api')
Reqeust.delete('/api')
Set HTTP header
// headers: { foo: 'bar' }
Request.get('/api').header('foo', 'bar')
// headers: { Authorization: 'bar' }
Request.get('/api').auth('bar')
// headers: { Authorization: 'Bearer token' }
Request.get('/api').bearer('token')
// headers: { foo1: 'bar1', Authorization: 'token' }
Request.get('/api')
.header('foo1', 'bar1')
.header('foo2', undefined)
.auth('token')
Set URL parameters
// url: /api/?foo=bar
Request.get('/api').param('foo', 'bar')
// url: /api/?foo2=bar2
Request.get('/api').param('foo1', undefined).param('foo2', 'bar2')
// url: /api/?foo1=bar1&foo2=bar2
Request.get('/api').params({ foo1: 'bar1', foo2: 'bar2' })
Set request body
Request.post('/api').body('content')
// Content-Type: application/json
Request.post('/api').jsonBody({ foo: 'bar' })
// Content-Type: multipart/form-data
Request.post('/api').formBody({ foo: 'bar' })
// Content-Type: application/x-www-form-urlencoded;charset=UTF-8
Request.post('/api').urlencodedFormBody({ foo: 'bar' })
Handle JSON response
Request.get('/api').acceptJson()
Browser Support
- Chrome
- Firefox
- Safari 10.1+
- IE 10+ (Should use with Promise, fetch, URL, URLSearchParams and FormData polyfills)