及时行乐|基于Promise实现对Ajax的简单封装
需求如下：原生ajax写起来太麻烦了 ， 我们想用下面的写法发送ajax ， 如何做呢？一起来看看！
【及时行乐|基于Promise实现对Ajax的简单封装】/*** 发送get请求* 参数是一个对象* 对象中url是请求路径必传项* 对象中method是请求方式get和post 可不传默认get* 对象中data是请求携带的数据 必传项 ， 且必须是对象* 对象中headers是请求形式 formdata或json post请求可不传默认formdata**/sealAjax({url: '/login',methed: 'post',data: {username: 'xxx', password: 111111},headers: 'json',}).then(data => {console.log('成功', data)}).catch(err => {console.log("失败", err)})很简单 ， 基于promise简单封装一下即可
function sealAjax(obj){// 首先将传入的数据接过来let data = http://kandian.youth.cn/index/obj.datalet url = obj.urllet methed=obj.methed ||'get'// 不传默认发送get请求let headers=obj.headers || 'formdata'// 默认以表单形式发送// 定义query变量存储query字符串 ， 主要用于get请求let query = ''if (data) {for (var i in data) {query += i + '=' + data[i] + '// 使用能力检测if (window.XMLHttpRequest) {xhr = new XMLHttpRequest()} else if (window.ActiveXObject) {xhr = new ActiveXObject('Microsoft.XMLHttp')} else {throw new Error('您的浏览器不支持ajax, 请升级')}// 最后返回一个promise对象return new Promise((resolve, reject) => {// 调用open, 用了个三元表达 ， 如果methed是post请求就用url ， 否则用url和query字符串拼接xhr.open(methed, methed === 'post' ? url : url + '?' +query, true)// 监听事件xhr.onreadystatechange = function() {// 判断xhr的状态码if (xhr.readyState === 4 ) {if (xhr.status === 200) {// 成功时 接收返回的内容resolve(xhr.responseText)} else {// 失败时 接收返回的内容reject(xhr.responseText)}}}// 设置响应头模拟为表单数据 ， 如果传进来的是json ， 请求头类型就设置json ， 发送json字符串// 如果传进来的是formdata ， 请求头类型就设置formdata ， 发送query字符串if (headers.toLowerCase() === 'json') {xhr.setRequestHeader('content-type', 'application/json;charset=utf-8')xhr.send(JSON.stringify(data))} else if (headers.toLowerCase() === 'formdata') {xhr.setRequestHeader('content-type', 'application/x-www-form-urlencoded;charset=utf-8')xhr.send(query)}})}到此Ajax就封装完成了 ， 使用第一段代码调用即可 。 不清楚的可以留言！
推荐阅读
- 军事的第一线|基于77GHz毫米波FMCW雷达的2D-SAR成像（Matlab算法与实测数据）
- 环球时报|中国驻法使馆：不接受基于谎言的所谓“国际独立调查”
- 及时行乐|阿根廷发现巨型鱼类，是白垩纪最恐怖的鱼类之一，牙齿跟针那么尖
- 新疆生活|中国驻法使馆：不接受基于谎言的所谓“国际独立调查”
- 前沿追踪|基于TorchText的PyTorch文本分类
- 及时行乐|「鹏哥聊车」小You很“甜”很“无感”哪吒U车机初体验
- 及时行乐|桐城快包业务跑出“加速度”
- 及时行乐|高防弹性IP 金山云荣获“可信云技术最佳实践--网络安全”奖
- 及时行乐|利亚德，显示新时代的白马？
- 及时行乐 为何中国不禁用苹果？其实原因很简单！，美国禁用华为