【ES6】es6封装好的ajax请求（类实现）

比眉伴天荒 2022-05-15 00:12 228阅读 0赞

# 以下是封装好的es6 ajax请求 #

class Ajax { 
        constructor(xhr) {
            xhr = window.XMLHttpRequest ? new XMLHttpRequest() : new ActiveXObject("Microsoft.XMLHTTP");
            this.xhr = xhr;
        }
    
        send(options) {
            let xhr = this.xhr;
    
            let opt = {
                type: options.type || 'GET',
                url: options.url || '',
                async: options.async || 'true',
                dataType: options.dataType || 'json',
                questring: options.questring || ''
            };
    
            return new Promise((resolve, reject) => { xhr.open(opt.type,opt.url,opt.async); xhr.onreadystatechange = () => { if(xhr.readyState === 4) { if(xhr.status === 200){ if(opt.dataType === 'json'){ const data = JSON.parse(xhr.responseText); resolve(data); console.log(data); } }else { reject(new Error(xhr.status || 'Server is fail.')); } } }; xhr.onerror = () => { reject(new Error(xhr.status || 'Server is fail.')); }; xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded"); xhr.send(opt.questring); }) } }

# 用法 #

let ajax = new Ajax();
    ajax.send({
        type : 'POST',
        url:'https://www.baidu.com/api/newsList.php'
    });

经测试可用。  
如有缺漏，请指出。谢谢。  
**挚谢阅读。**

发表评论取消回复

表情：

评论列表（有 0 条评论，228人围观）

还没有评论，来说两句吧...

相关阅读

相关 9.ES6-封装一个网络请求模块

封装一个网络请求模块 request.js function getData({ type = 'GET', url, data={ }, dataType='

亦凉/ 2023年06月18日 05:55/ 0 赞/ 116 阅读

相关 ES6--class类

class类的使用详解 1.通过class定义类/实现类的继承 2.在类中通过constructor重新定义类 3.通过new来创建类的实例 4.通过exten

我会带着你远行/ 2022年12月06日 12:37/ 0 赞/ 179 阅读

相关 es6 ajax async,ES6的async function以及await 语句

ES6的async function和await语句 ES6的async function从字面意思上看，就是一个异步执行的函数，没错，它的真是意义也是这样的。async f

川长思鸟来/ 2022年09月03日 14:17/ 0 赞/ 152 阅读

相关 es6 class类

class类 class Person \{ constructor(name, age, job) \{ this.name = n

秒速五厘米/ 2022年06月08日 02:13/ 0 赞/ 226 阅读

相关【ES6】es6封装好的ajax请求（类实现）

以下是封装好的es6 ajax请求 class Ajax { constructor(xhr) { xhr = wind

比眉伴天荒/ 2022年05月15日 00:12/ 0 赞/ 229 阅读

相关 ES6.6.2 使用小结 - 封装ES常用的查询方法

1.首先，接下来的查询demo里面包含了10常用的方法：term查询、terms查询、range查询、exists查询、prefix查询、wildcard查询、regexp查询

梦里梦外;/ 2022年02月27日 03:44/ 0 赞/ 564 阅读

相关 es6 Promise封装ajax

利用Promis 做一个简单的数据请求封装。 function requestP(options = {}) { const { ur

缺乏、安全感/ 2022年02月17日 08:47/ 0 赞/ 265 阅读

相关 ES6---Promise简析和请求封装

1、Promise的特点 a、Promise是异步编程的一种解决方案。 b、Promise的状态不受外部影响，一旦建立就会立即执行，无法中途取消；

秒速五厘米/ 2022年01月20日 21:11/ 0 赞/ 222 阅读

相关 ES6基础-ES6的扩展

进行对字符串扩展，正则扩展，数值扩展，函数扩展，对象扩展，数组扩展。开发环境准备：编辑器（VS Code, Atom，Sublime）或者IDE（Webstorm）

朴灿烈づ我的快乐病毒、/ 2021年08月20日 00:28/ 0 赞/ 523 阅读

相关 ES6--Class类

Class概述概述在ES6中，class (类)作为对象的模板被引入，可以通过 class 关键字定义类。 class 的本质是 function。它可以

喜欢ヅ旅行/ 2021年08月14日 00:29/ 0 赞/ 482 阅读