江苏龙网

  1. 首页 > 人文 > >

及时行乐|基于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实现对Ajax的简单封装很简单 ， 基于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就封装完成了 ， 使用第一段代码调用即可 。 不清楚的可以留言！


    推荐阅读


    上一篇：深山野墺|一位军人救下12岁女孩，答应十年后娶她，现状如何，汶川地震中

    下一篇：潇湘大视野|其与丈夫拌嘴后已失联7天！，又一女士失联