xhr-plus

---

XMLHttpRequest plus. support jsonp, iframe upload, sub domain proxy and more...

Example

http://localhost:8000/examples/

install

Usage

import io from 'xhr-plus';
io({
 url: '//x.com',
 method: 'get',
 data: {
   param: 'v',
 },
 success(data) {
 },
 error(e) {
 },
}).then((data) => {
 
}).catch(e => {
 
});

Promise support, place the following code inside your html head

<script>
  if(!window.Promise) {
    document.writeln('<script src="https://as.alipayobjects.com/g/component/es6-promise/3.2.2/es6-promise.min.js"'+'>'+'<'+'/'+'script>');
  }
</script> 

API

var req = io(config);
// req.abort();

config

name	type	default	description
url	String		url requested
method	String	get	request method
type	a string enum. `html`, `xml`, `json`, or `jsonp`. Default is inferred by response contentType	get	response data, type
data	object|string		entity body for `PATCH`, `POST` and `PUT` requests. Must be a query `String` or `JSON` object
form	HTMLElement		submit entire form without page refresh
cache	bool	true	whether add timestamp to url
traditional	bool	false	whether add [] to array data key (if false then add [])
headers	object	{}	additional request headers
contentType	string		sets the `Content-Type` of the request. Eg: `application/json`
processData	boolean	true	whether format data to string
timeout	number		timeout by seconds
beforeSend	(io) => void		A function called before the request
success	(data, status, io) => void		A function called when the request successfully completes
error	({message, status, xhr}) => void	true	A function called when the request successfully error
complete	(data, status, io) => void		A function called when the request completes
jsonpCallback	string	callback	specify the jsonp request query name
jsonpCallbackName	string	random string	Specify the callback function name for a `JSONP` request. This value will be used instead of the random (but recommended) name automatically generated by ajax.
withCredentials	bool	false	whether to set withCredentials
useSubDomainProxy	false|'auto'|'force'	false	whether use iframe proxy to request sub domain, note: 'auto' will only works in non-cors browser, set to 'force' to force cors browser use sub domain proxy
subDomainProxyUrl	string	/proxy.htm	sub domain iframe proxy url

methods

abort():void

abort current request

then(data): Promise

use data in promise

catch(e:{message, status, xhr}): Promise

catch error in promise

always(data|e)

always process in promise

static methods

ajaxSetUp(config)

set the default config for all requests

interceptors

You can intercept requests or responses like axios.

// Add a request interceptor
io.interceptors.request.use((config) => {
  // Do something before request is sent
  return config;
});
 
// Add a response interceptor
io.interceptors.response.use(function (response) {
    // Do something with response data
    return response;
}, function (error) {
    // Do something with response error
    return Promise.reject(error);
});

And what's fun is you can turn a response into error

io.interceptors.response.use(function (response) {
    if(response.notLogin) {
        const error = new Error('not login');
        error.isSystemError = true;
        return Promise.reject(error);
    }
});

If you may need to remove an interceptor later you can.

var myInterceptor = io.interceptors.request.use(function () {/*...*/});
io.interceptors.request.eject(myInterceptor);

Test Case

npm test
npm run chrome-test

Coverage

npm run coverage

open coverage/ dir

License

xhr-plus is released under the MIT license.