layui 封装 ajax请求

清清前端

已于 2023-05-31 17:35:59 修改

阅读量3.1k

点赞数

文章标签： javascript 前端 json

于 2022-08-01 11:08:37 首次发布

本文链接：https://blog.csdn.net/qing_er_/article/details/126097088

版权

这是一个用于 layui 后台管理系统的 JavaScript 封装，包含了 GET 和 POST 请求的函数，用于简化网络请求操作。当请求发出时，会检查并携带 token，同时处理各种错误状态，如 401（登录过期）和 403（无权限），并在出现这些错误时进行相应操作，如清除 session 并重定向到登录页面。

摘要由CSDN通过智能技术生成

/**封装网络请求 */
/**baseUrl */
var baseUrl = '';              //此处填写您的域名地址

/**token */
const token = sessionStorage.getItem("token");      //获取存储在浏览器中的token
let headers;
if(token){
    headers = {
        "Authorization": token             //关于请求头
    }
}

/**get请求数据 */
function getData (url = '', params = {}, isLoading = false) {
    if(isLoading){
        layer.load(1)          //在请求未响应之前,给用户一个等待状态
    }
    var promise = new Promise((resolve, reject)=>{
        $.ajax({
            url: baseUrl + url,
            type: 'GET',
            data: params,
            headers,
            success: res=>{
                if(isLoading){
                    layer.closeAll('loading')
                }
                if(res.code == 200){
                    resolve(res.data)
                }else if(res.code == 404){
                    layer.msg(res.msg, {icon: 7})
                    reject(res.data)
                }else if(res.code == 401){
                    layer.msg('登录过期，请重新登录', {icon: 7})
                    setTimeout(() => {
                        sessionStorage.clear();
                        window.location.href = '../page/login.html'        //根据后端返回code,判断一些错误情况
                    }, 1500);
                }else if(res.code == 403){
                    layer.msg('您无权限访问此系统', {icon: 7})
                    setTimeout(() => {
                        sessionStorage.clear();
                        window.location.href = '../page/login.html'
                    }, 1500);
                }
            },
            error: err=>{
                layer.msg(err, {icon: 7})       //其他错误情况
                reject(err)
            }
        })
    })
    return promise
}

/**post请求数据 */
function postData (url = '', params = {}, isLoading = false) {
    if(isLoading){
        layer.load(1)
    }
    var promise = new Promise((resolve, reject)=>{
        $.ajax({
            url: baseUrl + url,
            type: 'POST',
            data: params,
            headers,
            success: res=>{
                if(isLoading){
                    layer.closeAll('loading')
                }
                if(res.code == 200){
                    resolve(res.data)
                }else if(res.code == 404){
                    layer.msg(res.msg, {icon: 7})
                    reject(res.data)
                }else if(res.code == 401){
                    layer.msg('登录过期，请重新登录', {icon: 7})
                    setTimeout(() => {
                        sessionStorage.removeItem('token')
                        window.location.href = 'page/login.html'
                    }, 1500);
                }else if(res.code == 403){
                    layer.msg('您无权限访问此系统', {icon: 7})
                    setTimeout(() => {
                        sessionStorage.removeItem('token')
                        window.location.href = 'page/login.html'
                    }, 1500);
                }
            },
            error: err=>{
                layer.msg(err, {icon: 7})
                reject(err)
            }
        })
    })
    return promise
}

为方便在layui后台管理中提升开发效率，所以在js中封装了方法，以方便使用。