异步等待不起作用-JavaScript

发布于 2025-01-30 12:41:04 字数 999 浏览 0 评论 0原文

我正在使用Cloudinary上传图像，然后从Cloudinary返回图像URL后，我想将URL发送到后端并将其保存在数据库中。问题是当我使用Cloudinary API打电话时，它并没有等待响应从Cloudinary返回，它立即在Cloudinary One之后撞到后端URL。我也使用了异步和诺言。但这是行不通的。

cloudinary.js

import axios from 'axios'

export default {
async uploadToCloudinary(data) {
    

    let url = `url`

    let config = {
        headers: {
            "Content-type": "multipart/form-data",
        },
    };

    let image_url = axios.post(url, data, config).then(async res => {
        let data = await res.json();
        return data.secure_url
    }).catch(error => {
        console.log(error)

    })

    return image_url
}
}

main.vue

    async process() {

  let formy = new FormData();
  formy.append("file", this.file);
  formy.append("upload_preset", 'abcde');

 let imageUrl = await cloudinary.uploadToCloudinary(formy)

  await dataService.sendToDatabase({ image: imageUrl.secure_url}).then(res => {
    console.log(res)
  })

}

原文

I am using cloudinary to upload the image and after the image URL is returned from cloudinary, I want to send the URL to the backend and save it in my database. The problem is when i call using the cloudinary api, it is not waiting for the response to come back from cloudinary, it straight away goes to hit the backend URL after the cloudinary one. I have used async-await and promise also. But it is not working.

cloudinary.js

import axios from 'axios'

export default {
async uploadToCloudinary(data) {
    

    let url = `url`

    let config = {
        headers: {
            "Content-type": "multipart/form-data",
        },
    };

    let image_url = axios.post(url, data, config).then(async res => {
        let data = await res.json();
        return data.secure_url
    }).catch(error => {
        console.log(error)

    })

    return image_url
}
}

main.vue

    async process() {

  let formy = new FormData();
  formy.append("file", this.file);
  formy.append("upload_preset", 'abcde');

 let imageUrl = await cloudinary.uploadToCloudinary(formy)

  await dataService.sendToDatabase({ image: imageUrl.secure_url}).then(res => {
    console.log(res)
  })

}

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

↘紸啶 2025-02-06 12:41:04

您的诺言没有正确束缚。混合异步/等待和<代码>然后一起不是一个好主意。另外，未设置您的图像URL参数。结果，图像URL未传递给后端。

回复收藏 0 原文

这样的小城市 2025-02-06 12:41:04

好吧，您使用res.json（）。这通常与fetch一起使用。您不需要在Axios上这样做。您也不需要ync /等待< / code>在您的第一个功能

import axios from "axios"
export default {
  uploadToCloudinary(data) {
    let url = `url`;
    let config = {
      headers: {
        "Content-type": "multipart/form-data",
      },
    };
    return axios.post(url, data, config).then((res) => res.data.secure_url);
  },
};




async process() {
    let formy = new FormData();
    formy.append("file", this.file);
    formy.append("upload_preset", "abcde");

    let imageUrl = await cloudinary.uploadToCloudinary(formy);

    let response = await dataService.sendToDatabase({
      image: imageUrl.secure_url,
    });

    console.log(response);
  },

Well you use res.json(). This is usually used with fetch. You dont need to do that on axios. You also dont need async / await at ur first function

import axios from "axios"
export default {
  uploadToCloudinary(data) {
    let url = `url`;
    let config = {
      headers: {
        "Content-type": "multipart/form-data",
      },
    };
    return axios.post(url, data, config).then((res) => res.data.secure_url);
  },
};




async process() {
    let formy = new FormData();
    formy.append("file", this.file);
    formy.append("upload_preset", "abcde");

    let imageUrl = await cloudinary.uploadToCloudinary(formy);

    let response = await dataService.sendToDatabase({
      image: imageUrl.secure_url,
    });

    console.log(response);
  },

回复收藏 0 原文

~没有更多了~