封裝ajax並處理登入校驗

最近寫前端h5, 由於平時用vue axios比較多, 用ajax每次請求處理都比較麻煩, 便想著用promise封裝乙個ajax, 並且能夠全域性攔截處理token等. 自己做之前也看了一些網上的教程, 根據自己的理解將封裝ajax和攔截token整合到一起

第一步: 先建立乙個request.js檔案, 需要依賴jquery

第二步: 註冊ajax***, **如下

$(function () 
},error: function (jqxhr, textstatus, errorthrown) 
/*token過期, 重新獲取token*/
if (response.errcode === 70003) }}
});})

這裡每次傳送請求前判斷是否登入了, 本地是否存有token, 如果有, 每次請求都再請求頭中攜帶, 後台請求錯誤狀態碼為 401時, 即登入失效, 在此判斷是無效token可以跳轉到登入頁面, 如果token過期可以用refreshtoken請求後台重新申請token. 可以結合自己得業務進行拓展.

到這裡, 每次用$.ajax傳送請求就會被攔截, 但每次寫ajax請求比較繁瑣, 多個請求順序呼叫處理起來不太優雅, 所以我們在此將ajax傳送請求的方式進行封裝。

不了解promise的童鞋們，可以先看看大白話講解promise

話不多說，先上**為敬

let request = () => 
if (headers) 
if (params) 
if (data) 
if (datatype) 
if (contenttype) 
if (isbody) 
if (!async) 
//進行promise封裝
return new promise((resolve, reject) => ,
error: function (jqxhr, textstatus, errorthrown) 
})});
}

可以看見request是乙個函式，引數是乙個物件，裡面包含ajax的一些請求引數，返回乙個包裝了ajax請求的promise物件，引數中isbody為ture時設定contenttype和將data資料轉為字串，這是為了springboot引數用@requestbody時，傳送請求時簡化一些步驟，當springboot介面引數設定為@requestbody時，須加上

最上方圖中有乙個basic.js檔案，我們在這個檔案中編寫請求。（建議將api請求專門放到乙個或多個js檔案中）

function api_login(data) )
}function api_getinfo() )
}

以上定義了2個request請求，乙個是登入，乙個是登入成功後獲取使用者資訊。他們都返回乙個promise物件。

在專案中使用，下面是乙個使用者登入

function login()
localstorage.setitem("accesstoken", res.data.accesstoken);
localstorage.setitem("refreshtoken", res.data.refreshtoken)
api_getinfo().then(res => );
}).catch(error => );
}

這裡判斷登入內容無誤後，開始傳送請求，使用我們之前定義的api_login方法進行登入請求， res為後台返回的資料，將token和refreshtoken儲存到本地，登入後再獲取使用者的個人資訊。乙個登入驗證就完成了。

回過頭看。我們先定義乙個request.js檔案，分為2部分，一部分定義乙個***，捕獲401，403等請求，做出相應的處理，再定義乙個request函式，引數為平時我們用的ajax請求引數物件，返回乙個promise物件，裡面包含了ajax請求。再定義了乙個basic.js檔案，裡面存放了各種需要請求後台的介面方法，每個方法定義了url， type等。最後再我們自己的js檔案中就可以直接使用了，由於返回的是promise物件，所以可以通過.then()鏈式呼叫了。

第一次再網上寫文章，可能表達不清。希望能幫到童鞋們，哈哈。

封裝ajax並處理登入校驗

poi 匯入Excel封裝並處理資料型別

定義並處理事件

js豎列合併處理

封裝ajax並處理登入校驗

poi 匯入Excel封裝 並處理資料型別

定義並處理事件

js豎列合併處理

相關推薦

poi 匯入Excel封裝並處理資料型別