如何在JavaScript中把有多个回调层级函数写成同步方式？

Question

现在代码如下

function getLocaltion(callback){
    window.navigator.geolocation.getCurrentPosition(pos =>{
        let url = '百度地图api查询详细信息接口'+pos
        fetch(url, {...options})
            .then(data =>callback(null,data))
            .catch(err =>callback(err))
       }
}

如何把它改成用promise或者async/await形式
直接 let address = getLocaltion()

Answer 1

Async/Await
更新下，你可以自己把setTimeout改为你的异步方法:)

import fetch from "node-fetch"

function getLocaltion(callback) {
    return new Promise((resolve, reject) => {
        setTimeout(() => {
            fetch("http://www.baidu.com", {
                    "Method": "GET"
                }).then(data => resolve(data))
                .catch(error => reject(error))
        }, 5000)
    })
}

(async() => {
    try {
        var result = await getLocaltion()
        console.log(result) // RESULT
    } catch (e) {
        // ERROR
    }
})();

测试环境：

  "devDependencies": {
    "babel-cli": "^6.0.0",
    "babel-plugin-transform-runtime": "^6.4.3",
    "babel-polyfill": "^6.3.14",
    "babel-preset-es2015": "^6.3.13",
    "babel-preset-stage-3": "^6.3.13",
    "babel-runtime": "^6.3.19"
  },
  "dependencies": {
    "node-fetch": "^1.3.3"
  }

Answer 2

大概写一下是这样的。

var getCP = function () {
    return new Promise(function(resolve) {
     window.navigator.geolocation.getCurrentPosition(resolve);
    })
};

然后这样用：

getCP().then(function(position) {
    return fetch(…);
}).then(…);

手机打代码不方便，写了个大概。

重点就是把所有异步过程都封装成一个返回值为Promise的函数，像fetch那样。

Answer 3

const getLocaltion = callback => {
    let getCurrentPosition = new Promise(resolve => {
        window.navigator.geolocation.getCurrentPosition(resolve);
    });

    return getCurrentPosition.then(pos => {
        let url = '百度地图api查询详细信息接口' + pos;
        return fetch(url, {...options});
    }).then(data => callback(null, data)).catch(err => callback(err));
}