外部函数取ajax返回的数据

1、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返回来了，自然是无法获得我们想要的结果。

解决方法

• 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指针也在里面没有影响。