基于Promise如何实现对Ajax的封装

本篇内容主要讲解"基于Promise如何实现对Ajax的封装"，感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷，实用性强。下面就让小编来带大家学习"基于Promise如何实现对Ajax的封装"吧!

需求如下：原生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.{
      // 判断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)
    }
  })
}

到此，相信大家对"基于Promise如何实现对Ajax的封装"有了更深的了解，不妨来实际操作一番吧！这里是网站，更多相关内容可以进入相关频道进行查询，关注我们，继续学习！