項目實戰之AJAX訪問及相關問題整理

標籤：class   auth   common   json   log   info   table   amp   npc   

　　這篇主要寫在項目中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訪問及相關問題整理