第七色在线视频,2021少妇久久久久久久久久,亚洲欧洲精品成人久久av18,亚洲国产精品特色大片观看完整版,孙宇晨将参加特朗普的晚宴

為了賬號(hào)安全,請(qǐng)及時(shí)綁定郵箱和手機(jī)立即綁定

基于Promise實(shí)現(xiàn)對(duì)Ajax的簡(jiǎn)單封裝

標(biāo)簽:
Node.js

需求如下:
原生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就封装完成了,使用第一段代码调用即可

點(diǎn)擊查看更多內(nèi)容
TA 點(diǎn)贊

若覺(jué)得本文不錯(cuò),就分享一下吧!

評(píng)論

作者其他優(yōu)質(zhì)文章

正在加載中
  • 推薦
  • 評(píng)論
  • 收藏
  • 共同學(xué)習(xí),寫(xiě)下你的評(píng)論
感謝您的支持,我會(huì)繼續(xù)努力的~
掃碼打賞,你說(shuō)多少就多少
贊賞金額會(huì)直接到老師賬戶(hù)
支付方式
打開(kāi)微信掃一掃,即可進(jìn)行掃碼打賞哦
今天注冊(cè)有機(jī)會(huì)得

100積分直接送

付費(fèi)專(zhuān)欄免費(fèi)學(xué)

大額優(yōu)惠券免費(fèi)領(lǐng)

立即參與 放棄機(jī)會(huì)
微信客服

購(gòu)課補(bǔ)貼
聯(lián)系客服咨詢(xún)優(yōu)惠詳情

幫助反饋 APP下載

慕課網(wǎng)APP
您的移動(dòng)學(xué)習(xí)伙伴

公眾號(hào)

掃描二維碼
關(guān)注慕課網(wǎng)微信公眾號(hào)

舉報(bào)

0/150
提交
取消