首页 > 其他分享 >Promise 封装 Ajax

Promise 封装 Ajax

时间:2023-09-03 21:38:05浏览次数:36  
标签:封装 log json myAjax Ajax Promise console data

Ajax 请求是前端使用频率最高的功能之一,虽然现在有各种各样的工具库能够实现快速简洁的调用 Ajax 接口,但是在一些特定项目中,我们可能就是需要使用原生 Ajax 来发送请求。

今天我们就来尝试着使用 Promise 封装一下原生 Ajax,改善其回调冗长的问题。

封装

封装的主要思路就是:

  • 如果成功响应,则通过调用 resolve 结束 promise
  • 如果响应失败,则通过调用 reject 结束 promise
function myAjax(url) {
    return new Promise(function (resolve, reject) {
        var xhr = new XMLHttpRequest();
        xhr.onreadystatechange = function () {
            if (this.readyState == 4) {
                if (this.status == 200) {
                    // 成功的回调
                    resolve(this.responseText)
                } else {
                    // 失败的回调
                    reject(new Error());
                }
            }
        }

        xhr.open('get', url)
        xhr.send();
    })
}

这里要注意一个问题,如果返回的结果中,又有 ajax 请求需要发送,可一定记得使用链式调用,不要在then中直接发起下一次请求,否则,又是地狱见了:

 //  ==== Promise 误区====
myAjax('./d1.json').then(data=>{
    console.log(data);
    myAjax('./d2.json').then(data=>{
        console.log(data)
        // ……回调地狱……
    })
})

链式的意思就是在上一次 then 中,返回下一次调用的 Promise 对象,我们的代码,就不会进地狱了;

myAjax('./d1.json')
    .then(data=>{
    console.log(data);
    return myAjax('./d2.json')
})
    .then(data=>{
    console.log(data)
    return myAjax('./d3.json')
})
    .then(data=>{
    console.log(data);
})
    .catch(err=>{
    console.log(err);
})

优化

Promise 的最大问题是代码冗余,原来的任务被 Promise 包装了一下,不管什么操作,一眼看去都是一堆 then,原来的语义变得很不清楚。

我们可以继续使用Async/Await优化 Ajax 调用的过程。

将整个调用 Ajax 的流程封装成一个 async 函数,在其内部通过 await 控制 ajax 的执行顺序:

 async function callAjax(){
     var a = await myAjax('./d1.json')
     console.log(a);
     var b = await myAjax('./d2.json');
     console.log(b)
     var c = await myAjax('./d3.json');
     console.log(c)
 }
callAjax();

注意:await 关键词 只能在 async 函数内部使用

总结

本文使用了 Promise+Async/await优化了原生 Ajax 连续调用流程不优雅的问题。

标签:封装,log,json,myAjax,Ajax,Promise,console,data
From: https://blog.51cto.com/bianchengsanmei/7343318

相关文章

  • 封装Echarts组件 出现 多个Echarts组件只显示一个的问题
    代码部分:代码是没有问题的但是页面中只显示了一个ecahrts 解决:经百度后发现是组件中的Dom使用了固定id的问题 如果这么写那么页面中只会显示最后一个ecarts并且显示位置为第一个ecahrts组件的位置修改:  ok,解决! ......
  • 从零开始学习jQuery (六) AJAX快餐
    [导读] 一摘要本系列文章将带您进入jQuery的精彩世界,其中有很多作者具体的使用经验和解决方案,即使你会使用jQuery也能在阅读中发现些许秘籍本篇文章讲解如何使用jQuery方便快捷的实现Ajax功能统一所有开发人员使一.摘要本系列文章将带您进入jQuery的精彩世界,其中有很多......
  • Web阶段:第二十章:Ajax请求
    什么是Ajax请求?AJAX即“AsynchronousJavascriptAndXML”(异步JavaScript和XML),是指一种创建交互式网页应用的网页开发技术。ajax是一种浏览器异步发起请求。局部更新页面的技术。1、异步发起请求2、局部更新页面原生Ajax请求的实现(了解)<scripttype="text/javascript">func......
  • TO-277封装肖特基二极管SP1545L:15A 45V
    目前,市面上供应肖特基二极管的厂家、供应商特别地多,更多选择的背后,带来的却是更多的迷茫和不知所措。采购肖特基二极管,哪家好呢?提及“东沃电子DOWOSEMI”这个国产二极管品牌,很多客户可能第一想到他家的TVS二极管、ESD二极管、稳压二极、压敏电阻MOV、陶瓷气体放电管GDT、自恢复保险......
  • uniapp 远程搜索功能的封装
    封装组件<template> <viewclass="uni-combox"> <!--输入查询选择器--> <viewclass="uni-combox__input-box"> <inputclass="uni-combox__input"type="text":placeholder="placeholder"@c......
  • What's the difference between Async Await and Promise in JavaScript All In One
    What'sthedifferencebetweenAsyncAwaitandPromiseinJavaScriptAllInOneAsyncvsPromisedemos(......
  • ajax跨域jsonp
    java端代码:/** *AJAX跨域检证用户状态 *@paramrequest *@paramresponse *@throwsIOException */ @RequestMapping("ajaxCheckCross.html") publicvoiddoAjaxCheckCross(HttpServletRequestrequest,HttpServletResponseresponse)throwsIOException......
  • 页面ajax刷新的一种方式
           在做页面异步刷新时,以前的做法是,通过$.ajax()请求返回json格式的数据,然后通过回调方法,将数据一一解析出来,放到标签元素中,再与原页面衔接起来。这里有另一种做法:如:一个页面中有两个TAB,每个TAB都对应有一个具有翻页功能的list。这时如果页面上还有其他的元素,那么通过$......
  • 【Vue】vue3 v-draggable 拖拽指令封装
    说明需求:实现一个拖拽指令,可在父元素区域任意拖拽元素,同时如果传入的值为father,则拖拽的时候以父元素为拖拽对象思路:1、设置需要拖拽的元素为absolute,其父元素为relative。2、鼠标按下(onmousedown)时记录目标元素当前的left和top值。3、鼠标移动(onmousemove)时计算每......
  • 05 Ajax请求(扩展,延伸)
    05Ajax请求(扩展,延伸)首先,我们用Flask创建一个后台服务器(自己做网站了哈)目录结构:服务端:fromflaskimportFlask,render_template,request#pipinstallFlaskapp=Flask(__name__)@app.route("/")defindex():#跳转到首页print("你曾经来过服务器"......