项目实战之AJAX访问及相关问题整理
2021-07-13 17:05
标签：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再一次封装，尽量减少调用时的重复代码。 下面是一个具体的POST请求调用： 二、登录跳转问题 由于接入公司统一的单点登录。在拦截器没有获取到cookie的信息时会自动跳转到登录页。这是正常的情况。但是在ajax请求时值会正常返回，但是不会主动跳转。主要还是因为ajax是异步跳转，核心对象是xmlHttpRequest，无法实现自动跳转。那怎么办呢？其中一种办法就是获取这种未登录状态值的返回码，根据返回码手动设置跳转。实例代码如下： 温馨提示：如果你的部署环境有nginx做代理，要注意nginx将你判断的状态码，这里就是401.作为错误处理了，返回其他的异常。 项目实战之AJAX访问及相关问题整理 标签：class auth common json log info table amp npc 原文地址：http://www.cnblogs.com/wangyajin/p/7078273.htmlimport 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,
}
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();
})
}
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://.../");
}
})