TypeScript接口无法映射Axios响应，获取token返回undefined

你遇到的情况是：开发者工具里明明能看到响应包含{"token":"f8ad0dc6-6092-4b26-be9b-a891aa856eef"}，但调用api.test()后拿到的token却是undefined。

问题根源 #

你的test是async函数，但函数内部没有返回请求得到的token值。虽然你在then回调里返回了res.data.token，但整个test函数并没有把这个结果return出去，导致async函数默认返回Promise<undefined>，所以await api.test()得到的就是undefined。

修复方案 #

方案1：去掉then，用await直接处理响应

这是async函数更简洁的写法：

async test() {
    try {
        const res = await judgeApi.post<JudgeResponse>(`/submissions?${qs.stringify({
            language_id: 60,
            source_code: "cGFja2FnR29vZCBq...wbGUubmFtZSkKfQo=",
            stdin: "Sn...w"
        })}`);
        return res.data.token;
    } catch (err) {
        console.log("error" + err);
    }
},

方案2：保留then，需return整个请求Promise

如果坚持用then链式调用，要把post请求的Promise结果return出去：

async test() {
    try {
        return judgeApi.post<JudgeResponse>(`/submissions?${qs.stringify({
            language_id: 60,
            source_code: "cGFja2FnR29vZCBq...wbGUubmFtZSkKfQo=",
            stdin: "Sn...w"
        })}`).then(res => {
            return res.data.token;
        });
    } catch (err) {
        console.log("error" + err);
    }
},

额外优化：修正TypeScript接口命名 #

你的接口JudgeRequest命名不符合语义，这是响应的结构，建议改成：

interface JudgeResponse {
    token: string;
}

调用时对应改成post<JudgeResponse>，类型定义更准确。

修复后，你的测试代码：

const token = await api.test()
console.log("token... " + token)

就能正确打印出响应里的token值了。

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