[ 造轮子 ] 手动封装 AJAX （二） —— ES6 版

jhhfft 发布于2019-08-23 14:20 / 2084人阅读

摘要：相比前一版本除了使用与法外还有以下改动现在不需要按顺序输入参数会针对和做不同的数据处理可以自定义设置请求头增加了参数数据类型的判断调用代码示例调用效果图核心代码没有多少变化，因为只有这一种使用方法不支持低版本浏览器错误判断为必填项请求地址不

相比前一版本除了使用 ES6 与法外还有以下改动

现在不需要按顺序输入参数

会针对 GET 和 POST 做不同的数据处理

可以自定义设置请求头

增加了参数数据类型的判断

调用代码示例

ajax({
    url:"1.json",
    method:"post",
    resType:"json",
    headers:{
        id:465,
        name:123,
        key:798
    },
    data:{
        name: "yhtx",
        id: "1997"
    },
    success(res){
        console.log(res);
    },
    error(){
        console.log("error")
    }
})

调用效果图

核心代码没有多少变化，因为只有这一种使用方法

//不支持低版本浏览器
const ajax = ({url,method="GET",data={}, async = true ,success,error,resType="",headers={}})=>{
    //错误判断 url为必填项
    if(!url || url === ""){
        throw new Error("请求地址不能为空");
    }
    
    //变量声明
    let dataArr = [];
    let dataStr = "";
    let xhr = new XMLHttpRequest();//不兼容低版本浏览器
    let formData = new FormData();
    //将小写转换成大写
    method = method.toUpperCase();
    
    //初始化data
    switch (method){
        case "POST":
            for(let key in data){
                formData.append(`${key}`,`${headers[key]}`);//将data转换成 FormData 对象的字段
            }
        break;
        case "GET":
            for(let key in data){
                dataArr.push(`${encodeURIComponent(key)}=${encodeURIComponent(data[key])}`);
            }
            strData=dataArr.join("&");
        break;
    }
    
    
    //设置返回数据格式            
    if(typeof async === "boolean" && async){//如果设置了同步就不能设置返回数据格式
        if(typeof resType === "string"){
            xhr.responseType = resType; // 在不设置responseType的时候默认为 text
        }else{
            throw new Error("设置返回数据格式时，请使用字符串类型");
        }
    }
    
    //发起请求
    switch (method){
        case "POST":
            xhr.open(method , url , async);
        break;
        case "GET":
            xhr.open(method , `${url}?${strData}` , async);
        break;
    }
    //设置请求头 必须在 xhr.open() 后才可以
    //判断是否设置
    if(typeof headers === "object" && Object.keys(headers).length !== 0){
        //循环 headers 设置请求头
        for(let key in headers){
            xhr.setRequestHeader(`${key}`,`${headers[key]}`);
            // xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
        }
        //console.log(Object.keys(headers));//返回一个数组，数组成员是对象中所有的键
        //console.log(Object.values(headers));//返回一个数组，数组成员是对象中所有的值
    }
    
    xhr.send(formData);//发送数据
    
    //监听状态
    xhr.onreadystatechange = ()=>{
        if(xhr.readyState === 4){
            let res = xhr.response;
            if(xhr.status >= 200 && xhr.status < 300 || xhr.status === 304){
                typeof success === "function" && success(res);
            }else{
                typeof error === "function" && error(res);
            }
        }
    }
}

ajax({
    url:"1.json",
    method:"post",
    resType:"json",
    headers:{
        id:465,
        name:123,
        key:798
    },
    data:{
        name: "yhtx",
        id: "1997"
    },
    success(res){
        console.log(res);
    },
    error(){
        console.log("error")
    }
})

GPU云服务器云服务器造轮子一个封装的Ajax类原生js封装ajax js ajax 请求数据封装

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/100449.html

[ 造轮子 ] 手动封装 AJAX （一） —— 基础版

关于 AJAX 相信都用过，自己动手封装的也肯定有不少，但应该都只是简单的可以请求，不能设置同步异步以及返回的数据格式兼容低版本 IE5、IE6 可以使用 get 和 post 请求数据可以设置请求头需要的思路以及语法都有了，需要小伙伴自己拓展哦可以设置返回数据格式，不设置为默认 get 请求的数据拼接我没写，有需要的可以自己加之后会有 ES6 语法的封装敬请期待注：代码使用 ES5...

cc17 2019-08-26 13:27 评论0 收藏0
JavaScript 异步

摘要：从最开始的到封装后的都在试图解决异步编程过程中的问题。为了让编程更美好，我们就需要引入来降低异步编程的复杂性。写一个符合规范并可配合使用的写一个符合规范并可配合使用的理解的工作原理采用回调函数来处理异步编程。 JavaScript怎么使用循环代替(异步)递归问题描述在开发过程中，遇到一个需求：在系统初始化时通过http获取一个第三方服务器端的列表，第三方服务器提供了一个接口，可通过...

tuniutech 2019-08-21 18:34 评论0 收藏0
[译] 前端攻略-从路人甲到英雄无敌二：JavaScript 与不断演化的框架

摘要：一般来说，声明式编程关注于发生了啥，而命令式则同时关注与咋发生的。声明式编程可以较好地解决这个问题，刚才提到的比较麻烦的元素选择这个动作可以交托给框架或者库区处理，这样就能让开发者专注于发生了啥，这里推荐一波与。本文翻译自FreeCodeCamp的from-zero-to-front-end-hero-part。继续译者的废话，这篇文章是前端攻略-从路人甲到英雄无敌的下半部分，在...

roadtogeek 2019-08-19 18:25 评论0 收藏0
js速记

摘要：相关最大的特性就在于直接操纵网页上的节点，从而实现网页的局部刷新而非全局刷新。该回调函数会在送回响应的时候被调用。当然了，如果浏览器不支持对象，会返回，在这时需要进行额外的处理。前言马上就要参加一个团队项目进行React的前端开发了。最近正在着手熟练React语法，然后发现本质上还是建立在对javascript的深刻理解上。市面上在js基础上封装出了非常多优秀的车轮，其中最被新手广...

MageekChiu 2019-08-21 16:52 评论0 收藏0
初试面向对象编程

摘要：面向对象编程面向过程是一门面向过程的语言，也就是侧重点是实现一件事的步骤。面向对象以事物为中心，侧重于完成某件事所需要的事物的特征和行为的设计。面向对象编程面向过程 javascript是一门面向过程的语言，也就是侧重点是实现一件事的步骤。特点：有良好的可扩展性和重用性，降低了代码间的耦合度，接近日常思维。面向对象以事物为中心，侧重于完成某件事所需要的事物的特征和行为的...

cikenerd 2019-08-22 15:46 评论0 收藏0