美文网首页
用回调函数处理异步(ajax...)

用回调函数处理异步(ajax...)

作者: 摸摸大海参 | 来源:发表于2018-10-21 20:06 被阅读0次

在前端编程中,少不了用到异步。提一个本人在之前实际编程遇到的问题(ajax):
在独立的js文件中写统一提交ajax请求的函数:

function postApi (url, data) {
    var result = {};
    $.ajax({
        url: url,
        type: 'post',
        data: data ? data : {},
        success: (res) => {
            result = res
        },  
        fail:  (err) => {
           result = res
         }
    })
    return result
}

然后在js调用postApi函数中:

var res = postApi(url, data)

看似可以,实际上根本不行。因为ajax是异步请求,所以返回的并不是result。当然,使用async: false可以把ajax改为同步,返回值没问题,但是如果用的太多,页面假死次数太多,这样会导致用户体验不佳。这是大问题!

用回调函数可以轻易解决这个问题,使用回调函数其实就是使用了闭包,闭包会保存当前的作用域,异步操作能在这个作用域中拿到准确的数据。
1、修改postApi函数

function postApi ( url, data, cb ) {
    $.ajax({
        url: url,
        type: 'post',
        data: data ? data : {},
        success:  (res) => {
            cb && cb(res)
        },
        fail:  (err) => {
            cb && cb(err)
        }
    })
}

2、然后使用postApi函数:

postApi(url, data, (res)) => {
    console.log(res)
})

这样一来就可以拿到正确的返回值了。使用postApi时附加了一个匿名函数做作为回调函数。
在promise中也可以这样用:

function func(data, cb) {
    return new Promise((resolve, reject) => {
        if (data === 'OK') {
          resolve(data)
        } else {
          reject(data)
        }
    }).then((data) => { 
        cb && cb('data为‘OK’')
    }.catch(data) => {
        cb && cb('data不是‘OK’')
    })
}

func('OKK', (res) => {
    console.log(res)
})

提一句,如果多次使用相似的数据处理,可以写一个统一的处理函数,然后将这个函数作为回调函数使用,我这里写的是匿名函数。

相关文章

  • 用回调函数处理异步(ajax...)

    在前端编程中,少不了用到异步。提一个本人在之前实际编程遇到的问题(ajax):在独立的js文件中写统一提交ajax...

  • Node中的事件

    node中的异步 node通过使用回调函数来处理异步事件 未完待续

  • 理解Promise运行原理

    1.什么是PromisePromise可以认为是一种用来解决异步处理的代码规范。常见的异步处理是使用回调函数,回调...

  • ES6学习--异步编程--Generator

    异步编程 : (异步编程的语法目的就是让异步编程更像同步编程) 回调函数利用回调函数实现异步编程本身没有问题, 问...

  • php中call_user_func 与 call_user_f

    call_user_func()是利用回调函数处理字符串,call_user_func_array是利用回调函数处...

  • 异步处理

    回调函数处理异步 events 模块处理异步 基础模样 实例

  • Ajax外部得到Ajax运行后内部返回值的两种做法

    处理一ajax设置同步[推荐指数⭐] 处理二利用回调函数处理[推荐指数⭐⭐⭐]

  • 初识异步

    异步: 异步:自己不等结果,利用回调函数通知我结果。一般情况下,异步和回调是同时出现的。同步:自己在等结果代码展示...

  • Ajax请求共有多少种回调

    回调函数 如果要处理 $.ajax() 得到的数据,则需要使用回调函数:beforeSend、error、data...

  • async/await

    上周我们写到用回调或者then处理异步操作,这周我们体验一下使用async/await来处理异步 1.什么是asy...

网友评论

      本文标题:用回调函数处理异步(ajax...)

      本文链接:https://www.haomeiwen.com/subject/hbnbzftx.html