axios怎么连续调用？

Question

多个axios请求怎么按顺序实现？我写的是哪里出问题了，打印的res值都是来自第一个post请求的返回结果，第二个get请求里的res值没有获取到？

axios({
        method: 'POST',
        url: 'https://openspeech.bytedance.com/api/v1/tts_async/submit',
        headers: {
            'Content-Type': 'application/json',
            'Resource-Id': 'volc.tts_async.default',
            'Authorization': 'Bearer;CiWImuQXN_xzNTZ5YyC5r'
        },
        data: {
            "appid": "5565218",
            "reqid": nanoid(30),
            "text": '这是一段测试文字！',
            "format": "wav",
            "voice_type": "BV705_streaming"
        }
    }).then(function (res) {
        console.log('post', res.data)
        return axios({
            method: 'GET',
            headers: {
                'Content-Type': 'application/json',
                'Resource-Id': 'volc.tts_async.default',
                'Authorization': 'Bearer;CiWI1f4XN_xzNTZ5YyC5r'
            },
            url: `https://openspeech.bytedance.com/api/v1/tts_async/query?appid=5568&task_id=${res.data.task_id}`
        })
    }).then(function (res) {
        console.log('get', res.data)
    }).catch(err => {
            console.log('get:err')
    })

把第二个then放里面也是一样，

axios({
        method: 'POST',
        url: 'https://openspeech.bytedance.com/api/v1/tts_async/submit',
        headers: {
            'Content-Type': 'application/json',
            'Resource-Id': 'volc.tts_async.default',
            'Authorization': 'Bearer;CiWImuQZhWXN_xzNTZ5YyC5r'
        },
        data: {
            "appid": "556218",
            "reqid": nanoid(30),
            "text": '这是一段测试文字！',
            "format": "wav",
            "voice_type": "BV705_streaming"
        }
    }).then(function (res) {
        console.log('post', res.data)
        axios({
            method: 'GET',
            headers: {
                'Content-Type': 'application/json',
                'Resource-Id': 'volc.tts_async.default',
                'Authorization': 'Bearer;CiWImuQC1f4XN_xzNTZ5YyC5r'
            },
            url: `https://openspeech.bytedance.com/api/v1/tts_async/query?appid=556218&task_id=${res.data.task_id}`
        }).then(function (res) {
            console.log('get', res.data)
        })
    }).catch(function (err) {
        console.log(err)
    })

前端新手，请多指教

Answer 1

你的第二个axios的then在哪儿呢。。。
这样坑定没有第二个请求的结果打印啊

Answer 2

axios({
    method: 'POST',
    url: 'https://openspeech.bytedance.com/api/v1/tts_async/submit',
    headers: {
        'Content-Type': 'application/json',
        'Resource-Id': 'volc.tts_async.default',
        'Authorization': 'Bearer;CiWImuQXN_xzNTZ5YyC5r'
    },
    data: {
        "appid": "5565218",
        "reqid": nanoid(30),
        "text": '这是一段测试文字！',
        "format": "wav",
        "voice_type": "BV705_streaming"
    }
}).then(function (res) {
    console.log('post', res.data)
    return axios({
        method: 'GET',
        headers: {
            'Content-Type': 'application/json',
            'Resource-Id': 'volc.tts_async.default',
            'Authorization': 'Bearer;CiWI1f4XN_xzNTZ5YyC5r'
        },
        url: `https://openspeech.bytedance.com/api/v1/tts_async/query?appid=5568&task_id=${res.data.task_id}`
    })
}).then(function (res){
    console.log('get', res.data)
}).catch(function (err){
    console.error("error", err);
})

Answer 3

第一版本身没有问题，不过我注意到有一个拼写错误

    }).then(function (red) {     // <--- 这里 res 写成了 red 吧
        console.log('get', res.data)

理论上来说，这个拼写错误应该会造成 ReferenceError，但是如果没有抛这个错，说明更大的作用域内存在一个 res，这里打印的实际是那个 res 的值。

第二段代码的问题在于忘了 return，加上之后效果应该和第一段差不多。代码本身是没有问题的。

我重新定义了一个 axios 来模拟这个过程并输出日志，完全符合预期（如下图），所以你遇到的问题怕不是出在这里。

另外，这种连续调用，还是建议用 await 来写，代码逻辑会更清晰一些。就是别忘了用 try 来捕捉错误（或者提前 catch 掉）。比如下面的代码。注意如果你的环境不支持顶层 await，那需要用一个 async IIFE 封装一下。

try {
    const res1 = await axios({ method: "post" });
    console.log("POST", res1. data);
    const res2 = await axios({ method: "get", data: res1.data });
    console.log("GET", res2, data);
} catch (err) {
    console.log("error", err);
}

Answer 4

感谢大家的解答，是我把问题的方向搞错了。这是个关于语音合成的请求。post请求后会立刻受到一个json返回值{task_id:xxx,task_status:0,message:xxx}，请求成功，但是status状态解释是‘语音正在合成中’，
get请求里是需要拿到post请求返回值里的task_id的，然后发送请求并返回成功结果{task_id:xxx,task_status:0,message:xxx,audio:xxx}问题出在发送get请求时，语音还没有合成成功而是正在合成中，此时返回结果是{task_id:xxx,task_status:0,message:xxx}status值仍然等于0，也没有audio，所以让我错误的认为这个返回结果是post的。
解决方法是等status值等于1（合成成功）后，就会得到想要的结果了。