Ajax无脑封装

140 阅读1分钟

今天分享一份ajax的封装,无脑暴力推解,

首先我们需要了解ajax的请求是基于XMLHttpRequest对象来实现的,

(以下简称xhr)

所有的API调用方法,都源于xhr对象

基于明白这一步,下面我们就可以开始暴力推解这个ajax的请求了

首先,创建一个ajax方法

new一个XMLHttpRequest对象

图片

看看options是什么,就是我们做ajax请求所需要的请求参数,这里只是放置一些,基础需求,如果有全面需要的话,可以自己在进行向内配置

图片

如图上述所配置,五个参数:URL、method、async、timeout、data;分别是路径;请求方式;默认open建立连接为异步,防止被无意改为同步请求;

请求时间;携参;

而后继续,在方法里解构options参数,获取参数

图片

做一次超时处理

图片

下面,我们使用promise作为一个返回对象,使我们的请求可以使用then方法完成链式调用

图片

下面开始处理我们的请求建立链接

首先处理一下传递参数,进行编码处理

图片

判断method是否为get,如果是,把encodeData参数拼接到url之上

图片

建立链接,发送请求

图片

最后实现onreadystatechange回调方法,获取成功回调,同时作出失败异常处理

图片

最后上全部代码

图片

希望大家有所收获

图片

有兴趣的同学可以关注一下作者哦~~~

qrcode_for_gh_94721abee845_258-2.jpg