jq.ajax和ajax的Promise封装

纸飞机 发表于 2021/10/19 00:38:32 2021/10/19
【摘要】 jq.ajaxd的Promise封装: let ajax=function(url,type,data,datatype){ return new Promise((resolv...

jq.ajaxd的Promise封装:

let ajax=function(url,type,data,datatype){
        return new Promise((resolve,reject)=>{
            $.ajax({
                type: type,
                url: url,
                data: data,
                dataType: datatype,
                success: function (res) {
                    resolve(res)
                },
                error:function(error){
                    reject(error)
                }
            });
        })
       }
      ajax('http://ajax.root181.com/get.php','get',{a:1,b:2},'text')
      .then(data=>{console.log(data)})
      .catch(error=>{
          throw error.status
      })
  
 
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20

原生ajax 的Promise封装 :

 function ajax(url, data, method) {
            if (method == "get") {
                //拼接路径,解决缓存问题
                url += "?time=" + new Date().getTime();
                //判断传输的数据是否是一个对象
                if (typeof data == "object") {
                    for (var i in data) {
                        url += "&" + i + "=" + data[i]
                    }
                } else {
                    if (data) {
                        url += "&" + data
                    }
                }
            } else {
                //拼接路径,解决缓存问题
                var str = 'time=' + new Date().getTime();
                if (typeof data == 'object') {
                    for (var i in data) {
                        str += "&" + i + "=" + data[i];
                    }
                } else {
                    str += data
                }
            }
            //
            return new Promise((resolve, reject) => {
                var xhr = null;
                xhr = new XMLHttpRequest();
                if (method == "get") {
                    console.log(url);
                    xhr.open('get', url, true);
                    xhr.send();
                    xhr.onreadystatechange = function () {
                        if (xhr.readyState == 4 && xhr.status == 200) {
                            resolve(xhr.responseText);
                        }
                        setTimeout(function () {
                            reject(new Error('连接超时'))
                        }, 2000)
                    }
                }
                if (method == "post") {
                    xhr.open('post', url);
                    xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded; charset=utf-8");
                    xhr.send(str);
                    xhr.onreadystatechange = function () {
                        if (xhr.readyState == 4 && xhr.status == 200) {
                            resolve(xhr.responseText);
                        }
                        setTimeout(function () {
                            reject(new Error('连接超时'));
                        }, 2000)
                    }
                }
            })
        }
        ajax('http://ajax.root181.com/post.php', { a: 1, b: 2 }, 'post')
        .then(data => {
            console.log(data)
        })
  
 
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41
  • 42
  • 43
  • 44
  • 45
  • 46
  • 47
  • 48
  • 49
  • 50
  • 51
  • 52
  • 53
  • 54
  • 55
  • 56
  • 57
  • 58
  • 59
  • 60

文章来源: root181.blog.csdn.net,作者:前端纸飞机,版权归原作者所有,如需转载,请联系作者。

原文链接:root181.blog.csdn.net/article/details/89437689

【版权声明】本文为华为云社区用户转载文章,如果您发现本社区中有涉嫌抄袭的内容,欢迎发送邮件至:cloudbbs@huaweicloud.com进行举报,并提供相关证据,一经查实,本社区将立刻删除涉嫌侵权内容。
  • 点赞
  • 收藏
  • 关注作者

评论(0

0/1000
抱歉,系统识别当前为高风险访问,暂不支持该操作

全部回复

上滑加载中

设置昵称

在此一键设置昵称,即可参与社区互动!

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。