javascript - 如果将 async/await 与 axios.post 一起使用，它会变得无限并忽略下面的代码，但发布结果是成功的

Question

我有一个应用程序可以通过 axios.post 和 multer 在服务器上上传文件。一切顺利，文件上传成功，但是当我将 axios 切换到 async/await 时，它会卡住以运行 M.toast 或其后的任何代码。

我试图通过从服务器返回一些东西来解决它，但没有帮助。

const handleUploadFile = async (e) => {
    const data = new FormData()

    data.append('file', e.target.files[0])
    data.append('name', 'Reservations file')
    data.append('description', 'This is a file with new reservations')

    try {
      // Problem 1 - if you use AWAIT for axios it will never launch code after it.
      await axios.post('/files/', data)
      M.toast({html: "Notification"}) // doesn't work with await, otherwise - ok
    } catch(err) {
      console.log(err)
    }
  }

一切都按预期进行，直到您将函数切换到 async/await。

Server.js

const express = require('express')
const multer = require('multer')
const path = require('path')

const app = express()

app.use('/files', require('./routes/files'))

const PORT = process.env.PORT || 5000
app.listen(PORT, () => console.log(`Server started on port ${PORT}`))

routes/files.js

const express = require('express')
const router = express.Router()

const multer = require('multer')

const storage = multer.diskStorage({
    destination: './files/',
    filename(req, file, cb) {
      cb(null, `${new Date().toISOString().replace(/:/g, '-')}-${file.originalname}`);
    },
});

const upload = multer({ storage });

router.post('/', upload.single('file'), (req, res) => {
    console.log(res)
});

module.exports = router

Answer 1

如果你不希望你的前端无休止地等待，你必须从服务器端返回一个响应，否则它不会停止等待。 试试这个:

router.post('/', upload.single('file'), (req, res) => {
    return res.status(200).send({
        success: 'true',
        message: 'upload successful'
    })
});