js回调函数return变量，返回undefined，怎么解决不是返回undefined

Question

我在base.js写好了公共类，然后在index.js引用，问题在获取图片ajax这个方法最后return为undefined

以下是base.js的代码
import { Config } from './config.js';
import {mockData} from './mockData.js';

class Base {

constructor() {
    this.API_HOST = Config.API_HOST;
    this.DEBUG = Config.DEBUG;
}

//http请求类
ajax (params, callback) {
    var url = this.API_HOST + params.url;
    if(params.loginUrl==undefined){
        params.loginUrl = '../../login/login'
    }
    if(params.responseType==undefined){
        params.responseType = 'text'
    }
    
    
        wx.request({
            url: url,
            data: params.data,
            method: params.type,
            responseType: params.responseType,
            header: {
                'content-type': 'application/x-www-form-urlencoded',
                'Authorization': wx.getStorageSync('loginFlag')
            },
            success: function (res) {
                // 未登录
                if(res.data.code == 106 || res.data.code == 107 || res.data.code == 108){
                  wx.reLaunch({
                      url: params.loginUrl
                  })
                }
                
                //如果Authorization不为undefined则重新赋值loginFlag
                let loginFlag = res.header.Authorization
                if(loginFlag!=undefined ||loginFlag!=null){
                    wx.setStorageSync('loginFlag', res.header.Authorization)
                }
                
                //如果callback存在，就执行callback(res)
                callback && callback(res)
            },
            fail: function (err) {
                // console.log(JSON.stringify(err) + '这里是base的错误函数')
            }
        })
}

//获取图片ajax
imgAjax (id) {
    var _this = this;
    var imgUrl;
    var params = {
        'url': 'file/fileController/download?id=' + id,
        'type': 'GET',
        'responseType': 'arraybuffer'
    }
    // return params
    this.ajax(params, function (res) {
        // console.log(res, '图片在这');
        let base64 = wx.arrayBufferToBase64(res.data);
        imgUrl = 'data:image/jpg;base64,' + base64;
        console.log(imgUrl, "imgUrl")
        
        return imgUrl   //问题在这里return为什么是undefined
    })
}

}

export {Base}

下面是index.js 的代码

ceshi: function () {

console.log(base.imgAjax('2c91808b6d667186016d6672d9ff0007'), "ceshi")

}

Answer 1

异步、同步、回调；傻傻分不清。

imgAjax 是个同步函数，没有任何返回值，当然是undefined;

而你认为的返回，是在 回调函数里面返回的， 而这个回调函数 又是在另外一个回调中被触发的。

return imgUrl //问题在这里return为什么是undefined
这行代码，没有任何问题； 是你的console.log 执行的时候， 这段代码还没执行。

举个很简单的异步的例子

function a(){
  
   setTimeout(()=>{
    
    return '123'
   
   },5)

}

let d = a();

console.log(d); // 请问这个地方 输出的内容是什么？

Answer 2

方法一：回调callback

function demo1 (callback) {
  setTimeout(function () {
    callback('完成01')
  }, 2000)
}

demo1(alert)

方法2：async await Promise

;(async function () {
  function demo2 () {
    return new Promise(resolve => {
      setTimeout(() => {
        resolve('完成02')
      }, 200)
    })
  }

  let msg = await demo2()

  alert(msg)
})();

Answer 3

return 是返回当前方法的值。this.ajax(...) 是一个方法，里面的 function (res){} 是另外一个方法，return 写在哪个方法里，返回的就是哪个方法的值。因此你的代码里的 return 返回的是内部的 function (res) {} 的值。this.ajax(...) 没有返回值，所以你获取到的是 undefined