Ajax笔记（2）

最新推荐文章于 2024-10-17 17:15:00 发布

王小璐璐

最新推荐文章于 2024-10-17 17:15:00 发布

阅读量47

点赞数

文章标签： ajax javascript 前端

本文链接：https://blog.csdn.net/weixin_53170578/article/details/125285893

版权

这篇博客介绍了JavaScript中GET和POST请求的封装，以及如何使用Promise处理异步操作，使得代码更加简洁易读。通过示例展示了如何使用fetch函数进行Ajax请求，并在请求成功时执行回调函数。

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

1、封装get请求

//封装get
        //url:string,请求的地址
        //query:objrct,请求携带的参数(需要判断是否有参)
        //callback：function,成功之后的回调函数
        //isJson：boolean,是否需要解析
        function get(url, query, callback, isJson) {
            //若有参数，把参数拼接在url后边
            if (query) {
                url += '?'
                for (var key in query) {
                    url += `${key}=${query[key]}&`;
                }
                //去除最后一个&
                url = url.slice(0, -1)
            }
            var xhr = new XMLHttpRequest()
            xhr.open('get', url)
            xhr.send()
            xhr.onreadystatechange = function () {
                if (xhr.readyState === 4) {
                    if (xhr.status === 200) {
                        var res = isJson ? JSON.parse(xhr.responseText) : xhr.responseText
                        callback(res)
                    }
                }
            }
        }

2、封装post请求

 //post封装
        function post(url, query, callback, isJson) {
            //若有参数，把参数拼接起来
            var str = ''
            if (query) {
                for (var key in query) {
                    str += `${key}=${query[key]}&`
                }
                //去除最后一个&
                str = str.slice(0, -1)
            }
            var xhr = new XMLHttpRequest()
            xhr.open('post', url)
            xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded')
            xhr.send(str)
            xhr.onreadystatechange = function () {
                if (xhr.readyState === 4) {
                    if (xhr.status === 200) {
                        var res = isJson ? JSON.parse(xhr.responseText) : xhr.responseText
                        callback(res)
                    }
                }
            }
        }

3、封装Ajax

//ajax封装 val为一个对象
        function ajax(val) {
            var xhr = new XMLHttpRequest()
            if (val.method == 'get') {
                if (val.query) {
                    val.url += '?'
                    for (var key in val.query) {
                        val.url += `${key}=${val.query[key]}&`
                    }
                    val.url = val.url.slice(0, -1)
                }
                xhr.open('get', val.url)
                xhr.send()
            } else {
                var str = ''
                if (val.query) {
                    str += '?'
                    for (var key in val.query) {
                        str += `${key}=${val.query[key]}&`
                    }
                    str = str.slice(0, -1)
                }
                xhr.open('post', val.url)
                xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded')
                xhr.send(str)
            }
            xhr.onreadystatechange = function () {
                if (xhr.readyState === 4) {
                    if (xhr.status === 200) {
                        var res = val.isJson ? JSON.parse(xhr.responseText) : xhr.responseText
                        callback(res)
                    }
                }
            }
        }

3、promise对象用来处理异步，把异步代码写成同步形式，三种状态：pending（进行中），resolve（成功），reject（失败）。


        function sendMsg() {
            fetch('./data.php', { id: 1, name: '123' }, true).then(function (res) {
                console.log(res)
            })
        } 
//使用promise封装Ajax  return new Promise
        function fetch(url, query, isJson) {
            if (query) {
                url += '?'
                for (var key in query) {
                    url += `${key}=${query[key]}&`;
                }
                //去除最后一个&
                url = url.slice(0, -1)
            }
            return new Promise(function (resolve, reject) {
                var xhr = new XMLHttpRequest()
                xhr.open('get', url)
                xhr.send()
                xhr.onreadystatechange = function () {
                    if (xhr.readyState === 4) {
                        if (xhr.status === 200) {
                            var res = isJson ? JSON.parse(xhr.responseText) : xhr.responseText
                            resolve(res)
                        } else {
                            reject()
                        }
                    }
                }
            })
        }