promise封装ajax

最新推荐文章于 2025-09-11 14:12:58 发布

转载最新推荐文章于 2025-09-11 14:12:58 发布 · 79 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/wildccy/p/10543154.html

文章标签：

#json

本文介绍了一个使用原生JavaScript实现的简易版Axios库，包括GET和POST请求的发送，以及超时处理。该库通过Promise进行异步操作管理，并能够处理请求参数的序列化。

const axios = function(options){
    let promise = new promise(( resolve , reject )=>{
        var xhr = null;
        if(window.XMLHttpRequest){//兼容处理
           xhr = new XMLHttpRequest();
       }else{
           xhr = new ActiveXObject("Microsoft.XMLHTTP");   
       }
         var data = "";
        for (var key in options.data) {//数据处理
            data += "&" + key + "=" + options.data[key]
        }
       if (options.method == "get") {

            let url = options.url + "?" + data.slice(1);
            xhr.open(options.method, url);
            xhr.send();
        } else if (options.method == "post") {

            xhr.open(options.method, options.url);
            xhr.setRequestHeader("content-type", "application/x-www-form-urlencoded");
            xhr.send(data);
        }

    
        xhr.onreadystatechange = function () {
            let timer = null;
            let timeout = options.timeout?options.timeout:5000  //等待响应的时间 
            if(xhr.readyState == 4 && xhr.status == 200){
                let res = JSON.parse(xhr.responseText);
                clearTimeout(timer);
                resolve(res);
            }
             

            timer = setTimeout(()=>{
                clearTimeout(timer);
                reject(xhr.status);
            },timeout) 
            
        }
    })
    return promise;
}

栗子：

 axios({
        method:"get",
        url:"./data.json",
        data:{
            id:10
        }
    }).then((res)=>{
        console.log(res)
    },(e)=>{
        console.log(e);
    })

转载于:https://www.cnblogs.com/wildccy/p/10543154.html