封装简易axios

sxl不想学习

已于 2024-05-05 17:14:21 修改

阅读量92

点赞数 2

分类专栏： Ajax 文章标签：前端 javascript 开发语言

于 2024-05-05 16:37:00 首次发布

本文链接：https://blog.csdn.net/weixin_45629646/article/details/138468931

版权

Ajax 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

   <button class="reg-btn">注册</button>
    <script>
        function myAxios(config) {
            return new Promise((resolve, reject) => {
                if (config.params) {
                    const obj = new URLSearchParams(config.params)
                    config.url += `?${obj.toString()}`
                }
                const xhr = new XMLHttpRequest()
                xhr.open(config.method || 'GET', config.url)
                xhr.addEventListener('loadend', () => {
                    if (xhr.status >= 200 && xhr.status < 300) {
                        resolve(JSON.parse(xhr.response))
                    }
                    reject(new Error(xhr.response))
                })
                if (config.data) {
                    //设置请求头'Content-Type', 'application/json'
                    xhr.setRequestHeader('Content-Type', 'application/json')
                        //请求体携带json字符串
                    xhr.send(JSON.stringify(config.data))
                } else {
                    xhr.send()
                }
            })
        }

        document.querySelector('.reg-btn').addEventListener('click', () => {
            myAxios({
                url: 'r',
                method: 'post',
                data: {
                    username: 'mingming12333',
                    password: '123456'
                }
            }).then(res => {
                console.log(res);
            }).catch(err => {
                // console.log(err);
            })
        })
    </script>