(精华)2020年6月25日 JavaScript高级篇 ajax封装

<script>
function xmlAjax(opt) {
    return new Promise(function (resolve, reject) {
        var initOpt = {
            method: 'post',
            url: '',
            data: null,
            async: true,
            //告诉服务器，我给的是什么数据
            contentType: 'application/json;charset=UTF-8',
            done: function () {},
            fail: function () {}
        };
        var endobj = Object.assign({}, initOpt, opt);
        //1. 创建xml对象
        var xhr = new XMLHttpRequest();
        var isGet = endobj.method.toLowerCase() == 'get';
        if (isGet && endobj.data) {
            var str = '';
            for (var key in endobj.data) {
                str += key + '=' + endobj.data[key] + '&';
            }
            str = str.substring(0, str.length - 1);
            endobj.url = endobj.url + '?' + str;
        }
        //2.创建HTTP请求，链接服务器
        xhr.open(endobj.method, endobj.url, endobj.async);
        //3. 设置请求头部的方法，必须在open和send之间
        xhr.setRequestHeader('Content-Type', endobj.contentType);
        //4. 发送数据
        if (isGet) {
            xhr.send(null);
        } else {
            if (endobj.data) {
                var dataparam = JSON.stringify(endobj.data);
                xhr.send(dataparam);
            } else {
                xhr.send(null);
            }
        }
        xhr.onreadystatechange = function () {
            if (xhr.readyState == 4) {
                if (xhr.status == 200) {
                    var data = JSON.parse(xhr.responseText);
                    // endObj.done(data);
                    resolve(data)
                } else {
                    reject('error')
                    switch (xhr.status) {
                        case 500:
                            break;
                        case 400:
                            break;
                        case 304:
                            break;
                    }
                    endObj.fail('error');
                }
            }
        }
    })
}
xmlAjax({
    url: 'http://localhost:3000/msg/list',
    type: 'post',
    data: {
        name: 'laney',
        age: '30'
    }
}).then((res) => {
    if (res.result.focus) {
        return xmlAjax({
            url: 'http://localhost:3000/msg/list/hello',
            type: 'post',
            data: {
                name: 'laney'
            }
        })
    }
}).then(function (res) {
    console.log(res);
})
</script>

  

 

  
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
  
61
  
62
  
63
  
64
  
65
  
66
  
67
  
68
  
69
  
70
  
71
  
72
  
73
  
74
  
75
  
76
  
77
  
78
  
79
  
80
  
81
  
82
  
83
 

文章来源: codeboy.blog.csdn.net，作者：愚公搬代码，版权归原作者所有，如需转载，请联系作者。

原文链接：codeboy.blog.csdn.net/article/details/106962509