为了账号安全,请及时绑定邮箱和手机立即绑定

基于Promise实现对Ajax的简单封装

2020.07.28 16:05 6226浏览

需求如下:
原生ajax写起来太麻烦了,我们想用如下写法发送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 = obj.data 
  let url = obj.url
  let 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] + '&'
    }
    query = query.slice(0, -1) // query结果 username=xxx&password=111111
  }
  // 下面就是元生ajax写法
  let xhr = null;
  // 使用能力检测
  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就封装完成了,使用第一段代码调用即可

点击查看更多内容
0人点赞

若觉得本文不错,就分享一下吧!

评论

相关文章推荐

正在加载中
意见反馈 帮助中心 APP下载
官方微信

举报

0/150
提交
取消