使用async与await封装ajax请求

前端黑眼圈

于 2021-12-02 20:49:50 发布

阅读量887

点赞数

分类专栏： js 文章标签： ajax javascript 前端

本文链接：https://blog.youkuaiyun.com/qq_36595944/article/details/121686118

版权

js 专栏收录该内容

31 篇文章

订阅专栏

本文介绍了如何使用ES6语法封装一个AJAX请求，返回Promise对象，便于链式操作。同时通过示例展示了如何结合Promise的then方法进行测试。此外，还探讨了如何在async函数中使用await关键字来等待AJAX请求完成，简化异步处理。通过这些方法，可以更优雅地处理异步操作。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

封装ajax 的es6升级版

<!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>发送 AJAX 请求</title>
</head>
 
<body>
    <script>
        // 发送 AJAX 请求, 返回的结果是 Promise 对象
        function sendAjax(url) {
            return new Promise((resolve, reject) => {
                //1. 创建对象
                const x = new XMLHttpRequest();
                //2. 初始化
                x.open('POST', url);
                //3. 发送
                x.send();
                //4. 事件绑定
                x.onreadystatechange = function () {
                    if (x.readyState === 4) {
                        if (x.status >= 200 && x.status < 300) {
                            //成功回调
                            resolve(x.response);
                        }else{
                            //失败回调
                            reject(x.status);
                        }
                    }
                }
            })
        }
    
 
        //promise then 方法测试
 
        // sendAJAX("接口名").then(value=>{
        //     console.log(value);
        // }, reason=>{})
  
 
 
        // async与await 测试axios
        
        async function main(){
            //发送 AJAX 请求
            let result = await sendAJAX("接口名");
 
            console.log(result);
        }
 
        main();
        
    </script>
</body>
 
</html>