欢迎来到知了汇智!
联系电话:知了汇智-电话号码 028-62016472 / 13228113191

外部函数怎样取ajax返回的数据-知了汇智

外部函数怎样取ajax返回的数据

  ajax回调数据使用回调函数

  业务场景:上传图片后的取返回来的图片地址进行前台的展示

  前端上传图片需要对大图片进行图片压缩,然后再上传,小图片不做限制,总的文件比较到。这里我封装了全局的方法,方法正常使用。但是碰到一个问题,当想把上传图片后的地址返回来的时候,一开始想return回去。但是这个返回了null。

  function sendImage(url,fileObj) {
  let imageurl=”;//这里定义一个用作图片返回的url
  var form = new FormData(); // FormData 对象
  form.append(“file”, fileObj); // 文件对象
  xhr = new XMLHttpRequest(); // XMLHttpRequest 对象
  xhr.open(“post”, url, true); //post方式,
       url为服务器请求地址,true 该参数规定请求是否异步处理。
  xhr.onload = function(){
  //这里假如上传图片成功后
  imageurl=成功的返回图片url
  }; //请求完成
  xhr.send(form); //开始上传,发送form数据
  return imageurl;
  }

  我们在项目的其他地方调用这个函数是无法正常获得这个return的imageurl,因为ajax请求是异步的,当回调函数还没执行完成的时候,这个函数已经把imageurl返回来了,自然是无法获得我们想要的结果。

外部函数怎样取ajax返回的数据

 

  解决方法

  1、把异步请求改成同步请求xhr.open(“post”, url, false);

  这里碰到了个诡异问题,请求确实是同步了,数据也可以获得到了,外面调用的时候debugger发现js竟然绕过我调用的语句先往下面走了。所以我这个并不能完全解决我的问题。所以用了回调函数的方法作为参数的方法,算是个不错的方法

  *2、回调函数作为参数,其实就是把一个函数传进来了

  function sendImage(url,fileObj,method) {
  let imageurl='';//这里定义一个用作图片返回的url
  var form = new FormData(); // FormData 对象
  form.append("file", fileObj); // 文件对象
  xhr = new XMLHttpRequest();  // XMLHttpRequest 对象
  xhr.open("post", url, true); //post方式,
       url为服务器请求地址,true 该参数规定请求是否异步处理。
  xhr.onload = function(){
  //这里假如上传图片成功后
  method();
  }; //请求完成
  xhr.send(form); //开始上传,发送form数据
  return imageurl;
  }

  对上面的函数做一个处理,很容易看到函数加了一个参数(方法参数)

  使用的时候就可以

  sendImage(url,fileObj,function (value) {
  //value就是回调的数据
  // 这里就可以对数据做处理了
  })

  非常好用,在vue项目里面this指针也在里面没有影响。

       版权声明:本文来源于网络,由知了堂搜集整理,仅供大家学习前端时使用

132 2811 3191
预约免费试学
点击咨询
预约试学