基于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的封裝”有了更深的了解，不妨來實際操作一番吧！這里是億速云網站，更多相關內容可以進入相關頻道進行查詢，關注我們，繼續學習！