Mapbox：如何从HTTP请求中获取点位间行程时长并存入变量

你的代码核心问题有2个：

• 创建XMLHttpRequest实例、配置参数和回调之后，没有调用req.send()方法发送请求，请求根本没有触发，自然不会执行onload回调逻辑，也就拿不到返回值
• 没有添加错误捕获逻辑，出现异常时无法定位问题

两种修改方式你可以二选一：

方案1：修复原有XMLHttpRequest代码 #

在全局定义一个变量存储时长，修改requestMatrix函数如下：

// 全局变量，请求成功后时长会存入这里，后续逻辑直接取用即可
let travelDuration = 0;

function requestMatrix(link){
    var url = link;
    console.log("passed: " + url);
    var req = new XMLHttpRequest();
    req.responseType = 'json';
    req.open('GET', url, true);
    req.onload = function(){
        if(req.status >= 200 && req.status < 300){
            var jsonResponse = req.response;
            travelDuration = jsonResponse.durations[0][1]/60;
            console.log("行程时长（分钟）: " + travelDuration);
            // 所有需要用到时长的逻辑都可以写在这里
        } else {
            console.error("请求出错，状态码：", req.status, "错误信息：", req.response);
        }
    }
    // 新增这一行，发送HTTP请求
    req.send();
    // 注意不要在这里读取travelDuration的值，网络请求是异步的，此时请求还未返回结果
}

方案2：用更简洁的现代JS fetch API写法 #

如果愿意用新语法，可以改成更易读的写法：

let travelDuration = 0;
async function requestMatrix(link){
    try {
        const res = await fetch(link);
        const jsonResponse = await res.json();
        travelDuration = jsonResponse.durations[0][1]/60;
        console.log("行程时长（分钟）: " + travelDuration);
        // 所有需要用到时长的逻辑都可以写在这里
    } catch (err) {
        console.error("请求出错：", err);
    }
}

• 网络请求是异步的，不要在调用requestMatrix之后立刻读取时长变量，所有依赖时长的逻辑都要放在请求成功的回调里执行
• 如果需要计算多点位的时长，durations[i][j]对应你传入坐标列表中第i个点到第j个点的行程时长（单位为秒，除以60即可转换为分钟）
• 公开部署项目时建议给Mapbox的access token配置域名白名单，避免被盗刷调用配额

内容的提问来源于stack exchange，提问作者Arcel Dizon