ajax promise

最新推荐文章于 2025-05-11 17:31:58 发布

xieting153

最新推荐文章于 2025-05-11 17:31:58 发布

阅读量136

点赞数

CC 4.0 BY-SA版权

分类专栏： Ajax promise 文章标签： ajax promise

本文链接：https://blog.youkuaiyun.com/xieting153/article/details/82599620

Ajax 同时被 2 个专栏收录

4 篇文章

订阅专栏

promise

3 篇文章

订阅专栏

本文介绍了一个使用原生JavaScript实现的Ajax请求封装方法，通过Promise来简化异步操作流程。该方法支持GET和POST等HTTP请求方式，并能处理JSON数据类型。文章详细展示了如何设置请求参数、处理响应数据及错误情况。

<script>
    function ajaxPromise(options){
        let {
            type='get',
            url,
            data = {},
            dataType = 'json',
            cache = false // 不缓存
        } = options;
        //data参数处理
        let str = '';
        for(let k in data){
            if(data.hasOwnProperty(k)){
                str += `${k}=${data[k]}&`
            }
        }
        str = str.slice(0,str.length-1);
        //处理 url
        //判断是否是get请求
        let isGet = null;
        if(/get|head|delete/.test(type)){
            isGet = true;
        }else {
            isGet = false;
        }
        if(isGet){ // 是get系列请求
            if(url.indexOf('?') == -1){
                url += `?${str}`;
            }else {
                url = url.replace(/&$/,'');
                url += `&${str}`;
            }
            // cache ? null : url+=`&t=${Math.random()}`;
            cache ? null : url+=`&t=${new Date().getTime()}`;
        }
        return new Promise(function (resolve, reject) {
            //这里边的是做原生ajax；
            let xhr = new XMLHttpRequest();
            xhr.open(type,url);// 默认做成异步
            xhr.onreadystatechange = function () {
                if(xhr.readyState == 4 && /^2\d{2}|304/.test(xhr.status)){
                    //成功获取数据
                    //根据不同数据类型处理数据
                    let data = null;
                    switch (dataType){
                        case 'json':
                            data = JSON.parse(xhr.responseText);
                            break;
                        case 'xml':
                            data = xhr.responseXML;
                            break;
                        default:
                            data = xhr.responseText;
                    }
                    resolve(data);
                }
                if(xhr.readyState == 4 && /^[45]\d{2}/.test(xhr.status)){
                    //获取失败；
                    reject(xhr);
                }
            };
            if(!isGet){
                xhr.setRequestHeader('content-type','application/x-www-form-urlencoded');
            }
            xhr.send(str);
        })
    }


    ajaxPromise({
        url:'./1.json',
        data:{q:1},
    }).then((data)=>{
        console.log(data);
        data.push(1234);
        return data;
    }).then((data)=>{
        console.log(data);
    }).catch(()=>{

    });
</script>