ITPub博客

首页 > 应用开发 > IT综合 > 基于Promise实现对Ajax的简单封装

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

原创 IT综合 作者:千锋Python唐小强 时间:2020-07-29 15:41:12 0 删除 编辑

需求如下:原生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实现对Ajax的简单封装

很简单,基于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)
   }
 })
}

到此Ajax就封装完成了,使用第一段代码调用即可。不清楚的可以留言!


来自 “ ITPUB博客 ” ,链接:http://blog.itpub.net/69923331/viewspace-2707801/,如需转载,请注明出处,否则将追究法律责任。

请登录后发表评论 登录
全部评论

注册时间:2019-05-14

  • 博文量
    995
  • 访问量
    622950