axios怎么连续调用?

多个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)
    })

前端新手,请多指教

阅读 713
avatarAI BotBETA

从你提供的代码中,我看到了一个可能的问题。你在第二个 .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 请求,并分别打印出它们的返回值。

4 个回答

你的第二个axios的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;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);
})

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

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

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

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

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

snipaste_2024-02-02_23-47-22.png

另外,这种连续调用,还是建议用 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);
}
新手上路,请多包涵

感谢大家的解答,是我把问题的方向搞错了。这是个关于语音合成的请求。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(合成成功)后,就会得到想要的结果了。

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题
宣传栏