首页>前端>正文

Ajax回调的常见问题解决和JavaScript的两种回调函数_上海前端培训

时间:2018-07-21 14:08:51   来源:上海尚学堂   阅读:

在前端开发中,经常要用ajax去拿后台接口返回的数据,上海尚学堂前端培训总结几个ajax的回调的常见问题,供大家参考爬坑。另外在JavaScript中回调函数的情况也做一些介绍。
 

一、Ajax回调的常见问题和解决

  1. 未定义contentType,可能会造成的传入后台的数据乱码,可以加上如下代码在ajax请求中 contentType:'application/json;charset=UTF-8',
  2. 约定好传到后台以及后台返回的数据类型,一般定义json类型。
    json 转 string:JSON.stringify()
    string转json :JSON.parse()

这两个是常用的转换string和json的api

  1. 在success或者error回调中,return 是拿不到值的,即使改变了async:false也拿不到,看下面的例子:
function checkUserTask(taskid){
        $.ajax({
            method:'get',
            url:URL.checkUserTask,
            async:false,
            data:{'id':taskid},
            success:(response)=>{
                console.dir(response)
                if(response.code==200 ){
                    return true;
                }else{
                   return false;
                }
            }
        });
    }

这种写法即使是成功或者失败,在调用checkUserTask方法时都是返回的undefined,拿不到true或者false标识,所以一般写法修改如下:

function checkUserTask(taskid){
        var flag = false;
      
        $.ajax({
            method:'get',
            url:URL.checkUserTask,
            async:false,
            data:{'id':taskid},
            success:(response)=>{
                if(response.code==200 ){
                    flag = true;
                }else{
                    flag = false;
                }
            }
        });
        return flag;
    }

在回调的后面return 就可以拿到返回值。


二、JavaScript中的回调函数

JavaScript回调函数分为以下两种:

1、同步回调函数(普通的回调函数)

同步回调函数是要等到回调函数都执行完成后才能进行接下来的操作,也就是说是阻塞式运行。

function waitFive(callback){
      var currentDate = new Date();
      var pus = 0;
      while(pus<5000){
        var date = new Date();
        pus = date - currentDate;
      }
      callback("执行完成");
    }
    waitFive(function(msg){console.log(msg);});
    console.log("进行第二步操作;");
    
    **执行结果为:**
 
       执行完成
       进行第二步操作
   
  
因为是同步回调函数,所以是要先等waitFive函数执行完成后,才能执行
 
   console.log("进行第二步操作;");


2、异步回调函数

异步回调函数不需要等到回调函数都执行完成后才能进行接下来的操作,也就是说是非阻塞式运行。

function waitFive(callback){
      setTimeout(function(callback){
      callback("执行完成");
      
      },5000);
    }
    waitFive(function(msg){console.log(msg);});
    console.log("进行第二步操作;");
    
    **执行结果为:**
       进行第二步操作
       执行完成

因为是异步回调函数,所以是不需要先等waitFive函数执行完成后,才能执行
   console.log("进行第二步操作;");

三、最后补充2点


1.在修改页面做数据回显时,如果有根据ajax动态添加的html代码,一定要将该ajax的async设为false。如果为true的话可能会先执行下面的赋值语句,而赋值语句走完的时候该ajax未完成会导致没有赋值成功。

2.如果在for循环中走ajax,可能会出现该ajax本次没有完成而开始了下次执行,这样的话可能会使ajax中的代码没有顺利跑完。



部分参考原文: monkeykg       https://segmentfault.com/a/1190000015689366

上海尚学堂前端培训整理,需要前端培训资料或预定免费试学名额,请联系客服小姐姐。

分享:0

电话咨询

客服热线服务时间

周一至周五 9:00-21:00

周六至周日 9:00-18:00

咨询电话

021-67690939
15201841284

微信扫一扫