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