项目实战之AJAX访问及相关问题整理

Posted 2020-09-25

　　这篇主要写在项目中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.作为错误处理了，返回其他的异常。