VueJS Axios链请求动态数组vs静态数组报错

Question

我的项目快速概览： 向正在创建订单（可以是单个或多个订单）的第 3 方 API 发出 POST 请求，然后只收到 orderId。为了获取订单特定数据并将其显示给用户，我需要向另一个 API 发出另一个请求，该 API 将密钥和 orderID 作为参数，如果找到订单将显示订单特定数据。这必须在单个请求中发生，这意味着在单击按钮时会生成订单并且还会显示订单数据（这是第二个请求）。所以我需要将这两个链接请求在一起。 流程：创建订单 -> 接收 ID（数组） -> 发出第二个请求以接收订单特定数据 -> 向用户显示数据

简化代码示例（删除了正确的错误处理等。这只是一个 axios 示例）：

            const axiosHeaders = {
                headers: {
                    'Content-Type': 'application/x-www-form-urlencoded'
                }
            };
           
            //APIKEY is just string example "123dsdasd1231eadsa" and array of data is arrayOfData: [ 13798, 13799, 13800 ]
            const URLparams = "key="+ this.apiKey + "&data=" + this.arrayOfData

            axios.post('http://xxxxxxxxxxx/placebulkorder', params, axiosConfig)
            .then((response) => { 

                this.orderids = response.data.data.map(data => data.order_id)
                console.log(response)
            })
            .catch((e) => {
                console.log(error)
            }).finally(() => {
                
                const params = new URLSearchParams()
                params.append('key', this.apiKey)
                params.append('orderid', this.orderids)

                axios.post('http://xxxxxxxxxxx/order-status-bulk', params, axiosConfig
                ).then((response => { console.log(response) }))
                 .catch((error) => { console.log(error) })

            })

问题： 如上所述，为了获取订单特定数据，必须进行第二次请求。该请求以 apiKey 和 orderIds 数组为参数（'Content-Type': 'application/x-www-form-urlencoded'）

1. 如果我有静态 orderId: [13798, 13799, 13800] 并在第二个请求 URLparam 中使用它，那么第二个请求返回代码 200，所以一切正常。

   data(){
      return {
          orderId: [13798, 13799, 13800], //hardcoded values for example
          api_key: process.env.MIX_IPHONE_CHECKS_APP_KEY, //API key from .env file
    },
   

2. 如果我有返回数据 orderId: [] 并且在代码中我会将第一个请求响应 orderIds 映射到 this.orderID //动态数组// 并在代码中使用它，如下所示，然后服务器返回错误 500。（映射在上面的例子中）

    data(){
      return {
          orderids: [], //used to map response orderID dynamically
          api_key: process.env.MIX_IPHONE_CHECKS_APP_KEY, //API key from .env file
    },
   

在 URLparam 中使用静态数组会成功，但使用来自第一个请求响应对象的动态数组会抛出错误代码 500。这很奇怪，因为在第一次请求后，如果我控制台注销 this.orderIds，那么所有正确的响应 orderIDs将显示在 console.log 中，这意味着数组中有项目。同样如上所示，在这两种情况下，请求是相同的，但一个产生错误 500，另一个成功。

我尝试了什么？ 我试图不使用 axios.then.catch 并将其手动转换为 async/await 。也不工作。 我曾尝试使用 QS 模块对 urlparams (https://www.npmjs.com/package/qs) 进行字符串化，但也无法正常工作。 我尝试在映射中使用 JSON stringify 方法 this.orderids = response.data.data.map(data => JSON.stringify(data.order_id)) 之后使用 .join() 方法将其转换为数组。 我一直得到相同的结果。静态数组有效，但动态无效。

但是 ....我还尝试了另一件事，产生了一些结果。如果我创建了具有第二个请求含义的单独方法：

1. 点击按钮创建订单
2. 将 orderIds 从响应映射到数组
3. 等待几秒钟，然后单击另一个按钮以获取订单特定数据，然后成功 所以总而言之......在发出第二个请求之前等待工作。对于动态数组，如果我在发出第二个请求之前等待几秒钟（在最终原因中设置超时或在手动触发第二个请求之前等待）它可以工作。 这仅适用于动态数组。不管静态数组有多长。在静态数组的情况下，api 总是以代码 200 成功。

是什么导致了这个问题？为什么动态数组的处理方式不同？这是 axios 特定的东西吗？如何解决？

谢谢。如果需要更多规格，请告诉我。

Answer 1

您可以尝试使用另一个 .then() 钩子，而不是依赖 finally。 以下是您可以如何解决它并保持当前流程不变的方法。

const axiosHeaders = {
                headers: {
                    'Content-Type': 'application/x-www-form-urlencoded'
                }
            };
           
            //APIKEY is just string example "123dsdasd1231eadsa" and array of data is arrayOfData: [ 13798, 13799, 13800 ]
            const URLparams = "key="+ this.apiKey + "&data=" + this.arrayOfData

            axios.post('http://xxxxxxxxxxx/placebulkorder', params, axiosConfig)
            .then((response) => { 
                return response.data.data.map(data => data.order_id)
            })
            .catch((e) => {
                console.log(error)
            }).then((ids) => {
                const params = new URLSearchParams()
                params.append('key', this.apiKey)
                params.append('orderid', ids)

                axios.post('http://xxxxxxxxxxx/order-status-bulk', params, axiosConfig
                ).then((response => { console.log(response) }))
                 .catch((error) => { console.log(error) })
            });