使用axios和Vue js链接响应

wkftcu5l 于 2022-11-05 发布在 iOS

关注(0)|答案(2)|浏览(172)

我正试图用Axios将三个请求链接在一起。我正在练习VueIdejs，所以如果我的方法不理想，请纠正我。
我们的目标是有三个请求。一个是一个post，后面跟着两个get。我想要实现的是一个链接请求。
我的问题是：
1.这是个好办法吗？他们应该这样被锁在一起吗？
1.有没有可能像我在第一个post请求中所做的那样将响应Map到一个模型并将其传递给下一个？

const apiClient: AxiosInstance = axios.create({
 headers: {
     'content-type': 'application/json',
     'X-RapidAPI-Key': '08f852e........22fb3e2dc0...',
     'X-RapidAPI-Host': 'judge0-ce.p.rapidapi.com'
 },
 params: {base64_encoded: 'true', fields: '*'},
});

export const api = {

 async submitCode(code: Code) {
     code.language_id = 60
     code.stdin = "Sn..2Uw"
     code.source_code = btoa(code.source_code)
     apiClient.post<Token>(`https://judge0-ce.p.rapidapi.com/submissions?language_id=${code.language_id}&source_code=${code.source_code}&stdin=SnVkZ2Uw`)
     .then(function (response) {
         console.log("res.data", response.data.token);
     }).then(function (token) {
         console.log("token", token); // <---- empty
         `https://judge0-ce.p.rapidapi.com/submissions/${token}`  // <---- get request
     }).then(function (response) {
         console.log("res.data", response);
     }).then(function (response  ) {
         // here I will need a model
     })
     .catch((err) => {
         const error = err.response ? err.response.data : err;
         console.log("error" + error);
     })
 }

}

axios

来源：https://stackoverflow.com/questions/74255707/chaining-responses-with-axios-and-vue-js

2条答案

按热度按时间

fdx2calv1#

如果下一个函数依赖于前一个函数，则必须等待每个函数。或者，您可以使用传统意义上的Promise链接，使用new Promise(resolve, reject)。异步仅适用于顶级，因此您需要再次声明后续函数为“async”，如下所示。
我还建议用一个基本URL设置axios默认值，这样你就不必每次都重复完整的URL。注意，console.log语句不是“Thenable”，所以你的第一条语句和第三条语句除了定义下一个变量外没有任何作用。

const apiClient = axios.create({
  baseURL: 'https://judge0-ce.p.rapidapi.com/submissons',
  // ... headers ... //
});

export const api = {
  async submitCode(code){
  // ... code variable ...//
  await apiClient.post(
    `?language_id=${code.language_id}&source_code=${code.source_code}&stdin=SnVkZ2Uw`)
    .then(async (response1) => {
      const token = response1.data.token
      await api.get(`/${token}`)
    }).then(async (response2) => {
      console.log(response2.data)
      const model = response2.data.map((val1) => apiClient.get(`anotherGet/${val1.id}`))
      const result = await Promise.all(model)
      return result.map((val2) => val2.data)
    })
  // ... catch ...//
}}

赞(0）回复(0）举报 2022-11-05

wbrvyc0a2#

使用async，则不链接promices

async function submitCode(code: Code) {
    code.language_id = 60
    code.stdin = "Sn..2Uw"
    code.source_code = btoa(code.source_code)

    try { // ~ global `.catch`
        const token = await apiClient.post<Token>(`https://blah`)
        const get1result = await apiClient.get<Blah>(`https://balah?${token}`)
        const get2result = await apiClient.get<Blah>(`https://balah?${token}`)

        doBlah({token, get1result, get2result})
    } catch (err) { // maybe should check object type here
        const error = err.response ? err.response.data : err;
        console.log("error" + error);
    }
}

至于Vue，我只能重新评论使用asyncComputed，如果你需要的话，你可以用脚承诺进入
快递也有express.api或什么的，你可以跳过https://blah/com/api/部分的url，检查它

赞(0）回复(0）举报 2022-11-05

我来回答

使用axios和Vue js链接响应

2条答案

相关问题

热门标签

最新问答