基於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)

    }

  })

}

到此Ajax就封裝完成了，使用第一段程式碼呼叫即可。不清楚的可以留言！