async与await封装ajax请求

柔光的暖阳◎ 2022-10-11 00:51 185阅读 0赞

<!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('GET', 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("https://api.apiopen.top/getJoke").then(value=>{
            //     console.log(value);
            // }, reason=>{})
      
    
    
            // async与await 测试axios
            
            async function main(){
                //发送 AJAX 请求
                let result = await sendAJAX("https://api.apiopen.top/getJoke");
    
                console.log(result);
            }
    
            main();
            
        </script>
    </body>
    
    </html>

如上图所示，封装ajax的升级版，使用async函数，更加方便；

发表评论取消回复

表情：

评论列表（有 0 条评论，185人围观）

还没有评论，来说两句吧...

相关阅读

相关 async await

async: async相当于Promise的语法糖，函数前边加上async，函数里边return返回一个值(实际上返回的是一个promise对象)，相当于下边写法，里

浅浅的花香味﹌/ 2023年07月03日 06:25/ 0 赞/ 23 阅读

相关 async/await

1.async函数函数返回值为 promise对象 promise对象的结果由async 函数执行的返回值决定 2.await 表达式 await 右侧的表

雨点打透心脏的1/2处/ 2023年03月02日 07:42/ 0 赞/ 22 阅读

相关 async、await

词法定义 1、async async 是“异步”的简写， async 用于申明一个异步的 function 2.await await 可以认为是 a

绝地灬酷狼/ 2022年12月23日 12:29/ 0 赞/ 196 阅读

相关 async与await结合发送AJAX请求小案例

为熟悉async与await的使用，本文通过小案例来进行AJAX的发送！具体原理见如下博文！ [async函数与await函数基本原理介绍 https://blog.csd

朴灿烈づ我的快乐病毒、/ 2022年11月03日 15:29/ 0 赞/ 242 阅读

相关 async与await封装ajax请求

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8">

柔光的暖阳◎/ 2022年10月11日 00:51/ 0 赞/ 186 阅读

相关 uni-app/微信小程序请求方法封装使用async await

问题描述：网络请求每个页面基本都会用到，如不封装代码会十分难以维护，此方法需要npm下载[await-to-js][] 包，用于接收参数，话不多说直接上代码导入await-

深碍√TFBOYSˉ_/ 2022年09月11日 13:18/ 0 赞/ 267 阅读

相关 async/await

ES6中的async/await让Promise变得更加简便，通常await处理的链式Promise会包裹在函数中，返回结果仍然是一个Promise对象。但是当await直

今天药忘吃喽~/ 2022年01月28日 08:23/ 0 赞/ 272 阅读

相关使用promise封装jquery的ajax来实现async和await方式

promise是es6里用来解决回调地狱的方案，本质上只是让代码换了个书写形式，由异步形式换成可读性更好的“同步”形式。使用jquery的ajax时，有时会遇到要在响应结果

迷南。/ 2022年01月20日 06:37/ 0 赞/ 473 阅读

相关 async与await

function test () { return new Promise(resolve => { setTimeout(() => {

朴灿烈づ我的快乐病毒、/ 2021年10月01日 06:02/ 0 赞/ 343 阅读

相关 async和await 实现同步请求

注意：async外面的是异步的，await会阻塞！一，基本使用其实就是之前学过的异步函数，异步编程在函数前写一个ansyc，就转化为异步函数，返回的是一个pro

系统管理员/ 2021年07月26日 11:02/ 0 赞/ 1050 阅读