JavaScript ES6 异步async函数无法拿到return值-返回undefined的解决方法

异步获取函数

直接上异步获取数据的函数

async function getData(url) {
        const carsDataResponse = await fetch(url);
        const carsData = await carsDataResponse.json();
        const mydt = carsData.map(obj =>{return {name:obj.Name,mpg:obj.Miles_per_Gallon}})
            .filter(x=>x.name.indexOf("ford")>=0).filter(x=>x.mpg != null);
        return mydt;
    }

这个函数通过传入url值读取外部JSON数据，使用map方法抽取了其中的两个属性，最后使用filter方法保留只含有ford且mpg值不为空的值。
如果我们直接调用getDate函数是拿不到mydt值的。

console.log(getData("https://storage.googleapis.com/tfjs-tutorials/carsData.json"));

得到的结果是undefined。这是因为程序顺序执行，异步函数还没处理完数据我们就输出了。

解决办法

使用then方法。每个异步函数都有一个then方法，这个方法可以传一个匿名函数对返回的值进行处理。

getData("https://storage.googleapis.com/tfjs-tutorials/carsData.json").then(
       function (rel) {
           rel.forEach(function (value) {
                $("#myul").append(
                    `<li>
                    <span>${value.name}</span>
                    <span style="margin-left: 10px;background-color: #ff9000;color: #FFF;padding: 5px;">${value.mpg}</span>
                    </li>`
                );
           })
       }
    )

通过then函数处理后我们可以在页面上得到最终的数据呈现。