項目實戰之AJAX訪問及相關問題整理
阿新 • • 發佈:2017-06-26
.get ont class message 統一 comm pac 單點登錄 com
這篇主要寫在項目中AJAX的使用以及在解決登錄跳轉時遇到的問題,及解決辦法。
一、reqwest的使用
reqwest 是一種瀏覽器異步HTTP請求的封裝。支持xmlHttpRequest, JSONP, CORS, 和 CommonJS約束。
在package.json的依賴:"reqwest": "^2.0.5",且加入request.js,對reqwest再一次封裝,盡量減少調用時的重復代碼。
import request from ‘reqwest‘ function JSONP(url, data = {}, options = {}) { let _options = { data, ...options }; return request({ url, type: ‘jsonp‘, jsonpCallback: ‘callback‘, jsonpCallbackName: ‘jsonp‘, ..._options }).fail((err, msg) => { console.error(msg); }).then(resp => { return resp }); } function GET(url, data = {}, options = {}) { let _options = {data, ...options }; return request({ url, ..._options }).fail((err, msg) => { this.message(); console.error(msg); }); } function POST(url, data = {}, options = {}) { let _options = { data, ...options }; return request({ url, method: ‘POST‘, ..._options }); } export default { GET, JSONP, POST, }
下面是一個具體的POST請求調用:
refresh = () => { this.setState({tableLoading: true}); const hide = message.loading(‘正在查詢...‘, 0); const url = `...`;// 拼接要請求的url地址 const obj = {}; obj.page = this.state.currentPage; request.POST(url,obj) .then(resp => { hide(); const result = JSON.parse(resp); if(result.code === 100){ this.setState({ data: result.data, total: result.total, tableLoading: false, }); } }) .fail(error => { hide(); }) }
二、登錄跳轉問題
由於接入公司統一的單點登錄。在攔截器沒有獲取到cookie的信息時會自動跳轉到登錄頁。這是正常的情況。但是在ajax請求時值會正常返回,但是不會主動跳轉。主要還是因為ajax是異步跳轉,核心對象是xmlHttpRequest,無法實現自動跳轉。那怎麽辦呢?其中一種辦法就是獲取這種未登錄狀態值的返回碼,根據返回碼手動設置跳轉。實例代碼如下:
request調用省略... .fail(error => { if (error.status === 401 && error.statusText === "Unauthorized") { let loginUrl = error.getResponseHeader("Location"); let num = loginUrl.indexOf("?") + 1; let domain = loginUrl.substring(-1, num); console.info(domain); window.location.replace(domain + "ReturnUrl=http://.../"); } })
溫馨提示:如果你的部署環境有nginx做代理,要註意nginx將你判斷的狀態碼,這裏就是401.作為錯誤處理了,返回其他的異常。
項目實戰之AJAX訪問及相關問題整理