如何在JavaScript中使用获取的Access Token调用Strava API端点

问题根源 #

1. Promise链数据传递断裂：你的代码里then(json => console.log(json))没有返回处理后的JSON对象，导致后续的then回调拿不到认证响应数据，getActivities接收的参数是undefined，自然无法获取token。
2. 静态字符串未动态替换：构造请求URL时硬写了FETCHED_ACCESS_TOKEN，程序不会自动将其解析为变量值，必须手动拼接实际的token。

修正方案 #

修复Promise链的数据传递，从认证响应中提取token并动态构造请求地址（或使用规范的请求头传递token）：

// 声明变量避免全局污染
let data;

const _data = {
    client_id: "11111",
    client_secret: "AAAAAAAAAAAAAAAAAAAAAAAAAAAA",
    code: "exchange_code",
    grant_type: "authorization_code"
};

fetch("https://www.strava.com/api/v3/oauth/token", {
    method: "POST",
    body: JSON.stringify(_data),
    headers: {"Content-type": "application/json; charset=UTF-8"}
})
.then(response => response.json()) 
.then(json => {
    console.log(json);
    return json; // 必须返回，保证数据向下传递
})
.then(json => {
    data = json;
    return json; // 返回认证数据给下一个回调
})
.then(res => getActivities(res))
.catch(err => console.log(err));

async function getActivities(authRes) {
    // 从认证响应中取出access_token
    const accessToken = authRes.access_token;
    
    // 方式1：URL参数传递token（兼容Strava的旧接口调用方式）
    const activitiesLink = `https://www.strava.com/api/v3/segments/11111111?access_token=${accessToken}`;
    
    // 方式2：使用Authorization请求头传递（OAuth2标准方式，更安全推荐）
    // const activitiesLink = "https://www.strava.com/api/v3/segments/11111111";
    
    try {
        const response = await fetch(activitiesLink, {
            // 若使用方式2，取消下面注释
            // headers: {
            //     "Authorization": `Bearer ${accessToken}`
            // }
        });
        const json = await response.json();
        console.log(json);
    } catch (err) {
        console.error("请求活动数据失败:", err);
    }
}

关键修改说明 #

• 每个then回调都返回了处理后的结果，确保Promise链的数据能正常传递到getActivities。
• 使用ES6模板字符串（反引号包裹）动态拼接URL，将获取到的accessToken插入到正确位置。
• 提供两种token传递方式：URL参数兼容旧逻辑，Authorization头是OAuth2的标准安全做法，优先推荐后者。
• 给异步函数添加try/catch，更清晰地处理请求错误。

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