javascript - 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

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

    }).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 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

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

Answer 4

从你提供的代码中，我看到了一个可能的问题。你在第二个 .then() 中，将第二个 axios 请求的返回值赋给了 res，这是错误的。你应该直接调用第二个 axios 请求，而不是赋值给 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": "5565239218",        "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) {  // 注意这里应该使用一个新的函数来捕获第二个 axios 请求的返回值。    console.log('get', res.data)}).catch(err => {    console.log('get:err')})

这样，你的代码就可以按照预期的顺序执行两个 axios 请求，并分别打印出它们的返回值。