axios方法封装

最新推荐文章于 2024-07-25 22:35:58 发布

一只829

最新推荐文章于 2024-07-25 22:35:58 发布

阅读量152

点赞数

文章标签：前端 javascript 开发语言 axios promise

本文链接：https://blog.csdn.net/qq_63533863/article/details/124656182

版权

本文探讨了如何在JavaScript前端项目中对axios进行方法封装，以实现更高效、统一的API调用。通过创建自定义的请求函数，可以简化Promise处理，增强错误处理能力，并方便地添加全局配置和拦截器，提升开发体验。

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

function axios({method,url,params,data}){
    //方法转换大写
    method=method.toUpperCase();
    return new Promise((resolve,reject)=>{
        //1.创建对象
        const xhr=new XMLHttpRequest();
        //2.初始化 url中要放参数  所以要将params对象转化为字符串 a=100&b=200
        let str='';
        for(let k in params){
            str+=`${k}=${params[k]}&`;
        }
        str=str.slice(0,-1)
        xhr.open(method,url+'?'+str);
        //3.发送
        if(method==='POST'||method==='PUT'||method==='DELETE'){
            //设置请求头信息
            xhr.setRequestHeader('Content-type','application/json');
            //设置请求体 data为对象 要转化为字符串类型
            xhr.send(JSON.stringify(data))
        }else{
            xhr.send();
        }
        //对响应结果做预设 设置类型
        xhr.responseType='json';
        //4.处理结果
        xhr.onreadystatechange=