promise将回调函数取代，解决回调地狱

最新推荐文章于 2022-10-09 17:56:53 发布
最新推荐文章于 2022-10-09 17:56:53 发布
阅读量383 收藏
点赞数
文章标签： javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/qq_54455551/article/details/124203604
版权

ajax回调函数版本

// 防抖
function antishake(func, wait) {
    let timer = null
    return function () {
        clearTimeout(timer)
        timer = setTimeout(() => {
            func()
        }, wait)
    }
}
// 节流
function throttle(func,wait){
    // let timer = null//节流阀
    let flag = false
    return function(){
        
        if(flag) return// null====>false 如果是null（false）就执行下面代码（下面代码执行timer就变为true了），不是null就返回直接跳过     车上没人就上车 车上有人就直接跳过
        flag = true
        let timer = setTimeout(()=>{//上车了 车上有人
            func() // 到站了
            // timer = null // 下车
            flag = false
        },wait)

    }
}
//兼容各大浏览器
function createXhr(){
    if(window.XMLHttpRequest){
        return new XMLHttpRequest()
    }
    return new ActiveXObject("Microsoft.XMLHTTP");//兼容ie6
}
function ajax(options){//option是一个对象
    // 先准备默认的对象 存储默认值
    let defaultObj = {
        method:"GET",//默认为get请求
        url: "",
        aync:true,
        data:"",
        dataType: 'json',
        callback(){}
    }
    // url地址没有传递或者传递的是空 直接返回出去
    if(!options.url || options.url==""){
        throw new Error('url地址必须不为空')
    }
    // 取出options里面的数据 给到defaultObj 给后面使用
    for(let key in options){
        defaultObj[key] = options[key]//将对应的key进行赋值
    }
    // 判断（验证）method
    // defaultObj.method.toUpperCase()全字母转大写
    // defaultObj.method.toLocaleUpperCase()首行转大写
    if(defaultObj.method.toUpperCase() != "GET" && defaultObj.method.toUpperCase() != "POST"){
        throw new Error("请求方式错误")
    }
    // 判断callback是否为函数
    if(!typeof defaultObj.callback == "function"){
        throw new Error("回调函数类型错误")
    }
    // 判断aync是否为boolean类型
    if(!typeof defaultObj.aync == "boolean"){
        throw new Error("aync必须是boolean类型")
    }
    // 如果是get请求 就对对应的数据和请求地址拼接
    if(defaultObj.method.toUpperCase() == "GET"){
        defaultObj.url+='?'+defaultObj.data
    }
    if(defaultObj.data.toString() == "[object Object]"){
        let dataStr = ""
        for(let key in defaultObj.data){
            dataStr+=key+'='+defaultObj.data[key]+'&'
        }
        // 删除最后一个符号
        dataStr = dataStr.slice(0,-1)
        defaultObj.data = dataStr
    }
    // 创建一个请求对象
    let xhr = createXhr()
    // 设置open请求
    xhr.open(defaultObj.method.toUpperCase(),defaultObj.url,defaultObj.aync)
    // send发送请求
    if(defaultObj.method.toUpperCase()=="POST"){
        xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded')
        xhr.send(defaultObj.data)
    }else{
        xhr.send()
    }
    // 4、监听
    xhr.onreadystatechange = function () {
        if (xhr.readyState == 4 && /^20\d$/.test(xhr.status)) {
            //5.接收响应
            if(defaultObj.dataType == "json"){
                let res = JSON.parse(xhr.responseText)//转化为json对象
                defaultObj.callback(res)//回调，将对应响应结果带出
            }else{
                defaultObj.callback(xhr.responseText)//调用回调方法 将对应响应结果带出
            }      
        }
    }
}

jsonp回调函数版本

function jsonp(object){
    // {链接地址，参数(对象)，回调函数名字，回调函数}
    let {url,params,callbackName,callback} = object
    // 给window添加方法
    // 随机生成一个函数名 不能重复
    let fnName = "fn" + Date.now() + Math.ceil(Math.random()*10000)
    // 将对应回调函数添加給window 添加的函数名随机
    window[fnName] = callback
    // 创建标签script
    let script = document.createElement("script")
    // 将方法名拼接到url地址后面 跨域执行xxx
    url += `?${callbackName}=${fnName}`
    // 将参数拼接
    url += joinParams(params)
    // 将这个url地址给到script标签的src属性（自带的属性）
    script.src = url
    // 将script加到body
    document.body.appendChild(script)
    // 判断是否已经加载成功，加载成功后就删除script节约空间
    script.onload = function(){
        script.remove()
        delete window[fnName]
    }
}
function joinParams(params){
    let str = ''
    // 取出对象的值
    for(let key in params){
        str+=`&${key}=${params[key]}`
    }
    return str
}

ajax promise版本（无回调函数）

// 防抖
function antishake(func, wait) {
    let timer = null
    return function () {
        clearTimeout(timer)
        timer = setTimeout(() => {
            func()
        }, wait)
    }
}
// 节流
function throttle(func,wait){
    // let timer = null//节流阀
    let flag = false
    return function(){
        
        if(flag) return// null====>false 如果是null（false）就执行下面代码（下面代码执行timer就变为true了），不是null就返回直接跳过     车上没人就上车 车上有人就直接跳过
        flag = true
        let timer = setTimeout(()=>{//上车了 车上有人
            func() // 到站了
            // timer = null // 下车
            flag = false
        },wait)

    }
}
//兼容各大浏览器
function createXhr(){
    if(window.XMLHttpRequest){
        return new XMLHttpRequest()
    }
    return new ActiveXObject("Microsoft.XMLHTTP");//兼容ie6
}
function ajax(options){//option是一个对象
    // 先准备默认的对象 存储默认值
    let defaultObj = {
        method:"GET",//默认为get请求
        url: "",
        aync:true,
        data:"",
        dataType: 'json',
    }
    // url地址没有传递或者传递的是空 直接返回出去
    if(!options.url || options.url==""){
        throw new Error('url地址必须不为空')
    }
    // 取出options里面的数据 给到defaultObj 给后面使用
    for(let key in options){
        defaultObj[key] = options[key]//将对应的key进行赋值
    }
    // 判断（验证）method
    // defaultObj.method.toUpperCase()全字母转大写
    // defaultObj.method.toLocaleUpperCase()首行转大写
    if(defaultObj.method.toUpperCase() != "GET" && defaultObj.method.toUpperCase() != "POST"){
        throw new Error("请求方式错误")
    }
    // 判断callback是否为函数
    if(!typeof defaultObj.callback == "function"){
        throw new Error("回调函数类型错误")
    }
    // 判断aync是否为boolean类型
    if(!typeof defaultObj.aync == "boolean"){
        throw new Error("aync必须是boolean类型")
    }
    // 如果是get请求 就对对应的数据和请求地址拼接
    if(defaultObj.method.toUpperCase() == "GET"){
        defaultObj.url+='?'+defaultObj.data
    }
    if(defaultObj.data.toString() == "[object Object]"){
        let dataStr = ""
        for(let key in defaultObj.data){
            dataStr+=key+'='+defaultObj.data[key]+'&'
        }
        // 删除最后一个符号
        dataStr = dataStr.slice(0,-1)
        defaultObj.data = dataStr
    }
    // 创建一个请求对象
    let xhr = createXhr()
    // 设置open请求
    xhr.open(defaultObj.method.toUpperCase(),defaultObj.url,defaultObj.aync)
    // send发送请求
    if(defaultObj.method.toUpperCase()=="POST"){
        xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded')
        xhr.send(defaultObj.data)
    }else{
        xhr.send()
    }
    // 4、监听
    return new Promise(()=>{
        xhr.onreadystatechange = function () {
            if (xhr.readyState == 4 && /^20\d$/.test(xhr.status)) {
                //5.接收响应
                let res
                if(defaultObj.dataType == "json"){
                    res = JSON.parse(xhr.responseText)//转化为json对象
                }else{
                    res = xhr.status
                }  
                success(res)    
            }
            //服务器的响应 状态码
            if(!/^20\d$/.test(xhr.status)){
                error(xhr.status)
            }
        }
    })
    
}

jsonp promise版本（无回调函数）

function jsonp(object){
    // {链接地址，参数(对象)，回调函数名字，回调函数}
    let {url,params,callbackName} = object
    // 给window添加方法
    // 随机生成一个函数名 不能重复
    return new Promise((success,error)=>{
        try {
            let fnName = "fn" + Date.now() + Math.ceil(Math.random()*10000)
            // 将对应回调函数添加給window 添加的函数名随机
            window[fnName] = success
            // 创建标签script
            let script = document.createElement("script")
            // 将方法名拼接到url地址后面 跨域执行xxx
            url += `?${callbackName}=${fnName}`
            // 将参数拼接
            url += joinParams(params)
            // 将这个url地址给到script标签的src属性（自带的属性）
            script.src = url
            // 将script加到body
            document.body.appendChild(script)
            // 判断是否已经加载成功，加载成功后就删除script节约空间
            script.onload = function(){
                script.remove()
                delete window[fnName]
            }
            script.onerror = function(){
                error("错误")
            }
        } catch (error) {
            error("又错了")
        }
        
    })
    
}
function joinParams(params){
    let str = ''
    // 取出对象的值
    for(let key in params){
        str+=`&${key}=${params[key]}`
    }
    return str
}

测试 

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <input type="text" placeholder="停止输入1s后搜索">
    <!-- <script src="./JSONP.js"></script> -->
    <script src="./promiseJSONP.js"></script>
    <script src="./myajax.js"></script>
    <script>
        let url = "https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su"
        let input = document.querySelector('input')

        // promiseJSONP.js用return Premise
        let antishake1 = antishake(function () {
            let inputValue = input.value
            let promise1 = jsonp({
                url,
                params: {
                    wd: inputValue
                },
                callbackName: 'cb',
            })
            promise1.then((res) => {
                console.log(res)
            })
            promise1.catch((err) => {
                console.log(err);
            })
        }, 1000)
        input.oninput = function () {
            antishake1()
        }
        // JSONP.js用callback
        // jsonp({
        //     url,
        //     params:{
        //         wd:"江月奥"
        //     },
        //     callbackName:'cb',
        //     callback(res){
        //         console.log(res)
        //     }
        // })


        let promise1 = jsonp({
            url,
            params: {
                wd: "江月奥"
            },
            callbackName: 'cb',
        })
        promise1.then((res) => {
            console.log(res)
        })
        promise1.catch((err) => {
            console.log(err);
        })
    </script>
</body>

</html>

九九七七
关注
node使用promise替代回调函数
01-02
在学习 Node.js 过程中接触到了如何使用 async 来控制并发（使用 async 控制并发） async 的本质是一个流程控制。其实在异步编程中，还有一个更为经典的模型，叫做 Promise/Deferred 模型（当然还有更多相关解决方法，比如 eventproxy，co 等，到时候遇到在挖坑） 首先，我们思考一个典型的异步编程模型，考虑这样一个题目：读取一个文件，在控制台输出这个文件内容 var fs = require('fs'); fs.readFile('1.txt', 'utf8', function (err, data) { console.log(data);
Grove-meteor-call-promise:（已弃用）Meteor程序包，将Meteor.call与Promises一起使用，而不是使用回调
05-11
然而，随着Promise的广泛采用和ES6标准的推广，回调函数逐渐被Promise所取代。`Grove-meteor-call-promise`这个已弃用的程序包，正是尝试将`Meteor.call`与Promise结合，以提供更现代、更易于管理的异步处理方式。 ...
用promise代替回调函数
EvaLilys的博客
01-28 1253
用promise代替回调函数 如图，我要实现的功能就是，使用getread这个封装好的方法，先读取1.txt的内容，再读取2.txt的内容，再读取3.txt的内容。 这个代码是能实现我要实现的功能，但是这是一个很糟糕的代码，因为这样的代码其实就是出现了回调地狱，如果要继续写下去的话，只会的是无尽的回调，回调的太多了。 后来我找到了一个好的优化方法，就是使用promise 在promise上有...
什么是javascript中的回调函数如何用promise代替
weixin_26717681的博客
09-27 412
Let us understand term Callback by an real-world example: Suppose, you are calling to your Girlfriend (If you have) and she is busy in another call then she send message to you : “I am busy right now,...
Nodejs-使用 promise 替代回调函数
热门推荐
hellochenlu的博客
11-28 1万+
知识点 理解 Promise 概念，为什么需要 promise学习 q 的 API，利用 q 来替代回调函数(https://github.com/kriskowal/q) 课程内容 第五课(https://github.com/alsotang/node-lessons/tree/master/lesson5)讲述了如何使用 async 来控制并发。as
避免promise还是地狱回调写法
Madman528的博客
10-09 239
假如有3个函数,返回的都是一个promise,f2依赖f1返回的结果后才能执行,f3依赖f2返回的结果才能执行,这会导致回调地狱的写法,还是一层嵌套一层。用以下这种写法就可以避免,在上一个回调里返回一个下一个要执行的函数,返回的也是promise。如果其中一个出错了 咋办?因为是链式调用,可以在最后面用catch捕获。当然也可以用async await。
全面解析回调函数：程序员的困惑与解决之道
- 最常见的实现方式是将回调函数作为参数传递给其他函数。 - 被调用的函数内部，在某个条件满足或时机到时执行这个回调函数。 2. **返回函数：** - 有时函数可以返回另一个函数，这种函数的返回值本身就是一个回...
初识回调函数：什么是回调函数及其作用
回调函数则是函数式编程中重要的概念之一，允许我们在需要时将一个函数作为参数传递给另一个函数，并在特定事件发生时执行。这种灵活性使得回调函数在异步编程模型中发挥重要作用，特别在事件驱动模式下，如处理用户...
深入理解JavaScript回调函数2023版
随着技术的发展，虽然Promise、async/await等新的异步处理机制的出现，回调函数在某些场景下被取代或优化，但在许多情况下，回调函数仍然是实现异步操作的有效工具。 在理解回调函数时，有几个重要的知识点需要掌握...
函数的回调函数和闭包的使用
在编程中，函数的回调指的是将一个函数作为参数传递到另一个函数中，并在特定情况下执行这个函数。这种机制允许我们在代码中动态地传递行为，增加了代码的灵活性和复用性。 ### 1.1 介绍函数的回调 在JavaScript中...
timer-promise:setTimeout 和 clearTimeout 的 Promise 版本
06-21
定时器承诺 setTimeout 和 clearTimeout 的 Promise 版本 您可以像这样启动和停止计时器。 var timer = require ( 'timer-promise' ) ; timer . start ( 'foo' , 5000 ) . then ( function ( ) { } , function ( cancelled ) { } ) ; ... timer . stop ( 'foo' ) ; 代替 var timeoutId = setTimeout ( function ( ) { } , 5000 ) ; ... clearTimeout ( timeoutId ) ;
一个页面元素appendchild追加到另一个页面元素的问题
09-05
一般都是自己创建元素然后append到页面的但是如果是页面本身有的元素append到另一个页面元素呢,很多的新手朋友对此问题比较好奇，本人也是如此啊，好了不多说，切入主题，感兴趣的朋友可以了解下哦
Ajax 异步JS&xml - XMLHttpRequest详解从XHR到Promise
CheAyuki13的博客
03-12 1767
Ajax 快速入门 从XHR对象到Promise的使用 详解 学习资源整合
【Promise】Promise 使用 / 回调地狱问题 async-await /宏队列与微队列
one or only的博客
08-06 2058
【Promise】Promise 的使用 / 回调地狱问题 async-await /宏队列与微队列
promise处理回调以及Async/Await替代promise的六大理由
Haley_Guo的博客
04-24 3510
简要介绍：ES6中，可以通过promise来处理回调函数，回调函数经常用于异步操作中，间接来说，可以通过promise优化异步操作。 1.什么是JS中的回调函数？ 回调函数是作为参数传递给另外一个函数，并且该回调函数在函数主体执行完后再执行。 2.常见的回调函数以及存在的缺陷 常见的回调函数： 我们在jquery的ajax请求中，可以看到回调的身影，经典的封装后的ajax请求就是...
再不用ES6就Out了--Promise解决回调地狱
descire
12-02 3170
Promise的介绍特点： * 它有三种状态:Pending(进行中)Resolved(已完成)Rejected(失败) * 一旦建立，就无法取消。这是它的缺点。基本写法： let flag = true; let p = new Promise((resolve, reject) => { if (flag) { resolve('success');
19-Promise：使用Promise，告别回调函数
LIJIWEI0611的博客
04-20 413
在上一篇文章中我们聊到了微任务是如何工作的，并介绍了 MutationObserver 是如何利用微任务来权衡性能和效率的。今天我们就接着来聊聊微任务的另外一个应用Promise，DOM/BOM API 中新加入的 API 大多数都是建立在 Promise 上的，而且新的前端框架也使用了大量的 Promise。可以这么说，Promise 已经成为现代前端的 “水” 和 “电”，很是关键，所以深入学习 Promise 势在必行。 　　不过，Promise 的知识点有那么多，而我们只有一篇文...
Promise的基本使用
前人挖坑，后人种（pen）
01-11 298
new Promise((resolve, reject) =&gt; { this.timer = setTimeout(() =&gt; { resolve(); }, 500) }).then(() =&gt; { ...
定时器和promise_Blog/定时器与Promise对象.md at master · sueRimn/Blog · GitHub
weixin_29645033的博客
01-17 154
定时器JavaScript 提供定时执行代码的功能，叫做定时器(timer)，主要由setTimeout()和setInterval()这两个函数来完成。它们向任务队列添加定时任务。setTimeout()setTimeout函数用来指定某个函数或某段代码，在多少毫秒之后执行。它返回一个整数，表示定时器的编号，以后可以用来取消这个定时器。第一个参数func|code是将要推迟执行的函数名或者一段代...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值