Skip to content

pandaoh/js-xajax

Repository files navigation

js-xajax

JavaScript XMLHttpRequest(xhr) 的封装,方便需要使用原生 ajax 的项目使用。

  • 方便全局管理请求
  • 拆箱即用解决了原生 xhr 使用复杂的问题。
  • 支持请求超时设置
  • 支持自定义请求/响应数据处理
  • 支持异常处理与特定事件监听
  • 增加请求/响应/错误拦截功能
  • 请求头拦截处理(Headers)
  • 日志输出,请求完成时的回调(无论是否成功) Hooks。
  • 提供实例默认配置修改方法(timeout/baseUrl...)

Install

npm install js-xajax -S

Import

// Es or Node const { XAjax, HttpMethod, EVENTS } = require('js-xajax'); import { XAjax, HttpMethod, EVENTS } from 'js-xajax'; import XAjax from 'js-xajax'; // Browser <script src="xajax.min.js"></script> console.log(xajax);

Use

console.log({ XAjax, HttpMethod, EVENTS }); XAjax.get('https://a.biugle.cn', { q: 'query' }, { token: 'xxx' }) .then((data) => console.log(data)) .catch((e) => console.log(e)); $xhr = XAjax.create({ dump: JSON.stringify, // 用户自定义数据 encode load: JSON.parse, // 用户自定义数据 decode xmlHttpRequest: () => new XMLHttpRequest(), // 生成 xmlHttpRequest 实例 timeout: 30000, baseUrl: '', raw: false, // 数据按原格式发送,不进行 dump/load withCredentials: false, // Setting after open for compatibility with IE versions <=10 eventsHandler: { [EVENTS.PROGRESS]: (xhr, xhrProgressEvent) => { console.log('xhr', xhr); console.log('progress', xhrProgressEvent); } // 事件监听处理 }, requestHandler: (request) => { console.log('requestHandler', request); }, setRequestHeaders: (headers) => { console.log('setRequestHeaders', headers); return headers; }, responseHandler: (response) => { console.log('responseHandler', response); }, errorHandler: (error) => { console.log('errorHandler', error); }, requestFinally: () => { console.log('requestFinally'); } }); // use $xhr $xhr .post('https://a.biugle.cn/post', { data: 'data' }, { token: 'xxx' }) .then((data) => console.log(data)) .catch((e) => console.log(e));

API Docs

API Docs

Others

About

JavaScript XHR&AJAX. 封装 XMLHttpRequest(xhr),方便需要使用原生 ajax 的项目使用。

Topics

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published