Ajax УДАЛИТЬ несоответствие пути запроса

Question

Я настроил сервер express для обработки различных запросов, одним из которых является запрос на удаление. Это работает несколько раз и дает 404 раза. Я заметил, что URL, который он посылает, отличается. Поэтому, если я изменю свой серверный код для обработки одного пути, он будет работать, пока клиент не отправит другой путь. Я не могу понять, почему он отправляет разные URL-адреса и не соответствует. Я очень новичок в веб-программировании; еще студент. Может быть, я что-то очень скучаю c.

Запрос отправляется со страницы

http://localhost: 3000 / заметки

.

Вчера запрос был отправлен по этому пути:

Сегодня запрос:

На всякий случай, если изображения не загружаются, это URL:

http://localhost: 3000 / api / notes / id

http://localhost: 3000 / notes / api / notes / id

Это запрос на стороне клиента: (Я подтвердил, что его вызов удаление с правильным значением)

    var deleteNote = function(id) {
       return $.ajax({
       url: "api/notes/" + id,
       method: "DELETE"
      });
    };

Это код сервера:

    app.delete("/api/notes/:id", (req, res) => {
        let chosenNoteToDelete = req.params.id;

        fs.readFile(__dirname + "/db/db.json", (err, data) => {
         if(err){
           throw err;
         }
        let json = JSON.parse(data);

        for(let i=0; i<json.length; i++){
            if(json[i].id === chosenNoteToDelete){
               json.splice(i,1);
            }
        }

        fs.writeFile(__dirname + "/db/db.json", JSON.stringify(json), (err) => {
            if(err){
                throw err;
            }
            res.send("Successfully deleted");
        })

      })

    });

Может кто-нибудь помочь мне понять, почему он несовместим? И как мне справиться с этим на сервере?

Answer 1

Измените код клиента с этого:

var deleteNote = function(id) {
   return $.ajax({
   url: "api/notes/" + id,
   method: "DELETE"
  });
};

на это:

var deleteNote = function(id) {
   return $.ajax({
   url: "/api/notes/" + id,
   method: "DELETE"
  });
};

Ваш относительный путь говорит jQuery объединить ваш путь с путем из URL страницы. Вы не хотите относительный путь. Вы всегда хотите, чтобы он был /api/notes/id, поэтому вам нужен ведущий sla sh.

---

Некоторые другие вещи для очистки в коде вашего сервера.

1. Записывайте все возможные ошибки с помощью console.log(err) или с помощью какого-либо аналогичного механизма ведения журнала.

2. НИКОГДА, НИКОГДА не пишите if (err) throw err на вашем сервере внутри асинхронного обратного вызова. Это не приносит пользы, так как никто не может поймать эту ошибку. Вместо этого вы должны всегда регистрировать ошибку и затем ОБРАЩАТЬ ее, отправляя ответ об ошибке.

3. При синтаксическом анализе JSON из внешнего источника, который может выдать ошибку, используйте try/catch вокруг it.

4. Когда вы .splice() итерируете массив, вам нужно либо return после обработки .splice(), либо вам нужно исправить индекс итерации (потому что вы просто переместите элементы массива вниз, которые следуют за ним, чтобы пропустить следующий элемент в массиве) или вам нужно перебрать массив в обратном направлении, чтобы операция .splice() не влияла на итерацию.

Вот исправленная версия вашего кода:

app.delete("/api/notes/:id", (req, res) => {
    let chosenNoteToDelete = req.params.id;
    fs.readFile(__dirname + "/db/db.json", (err, data) => {
        if (err) {
            console.log(err);
            res.sendStatus(500);
            return;
        }
        try {
            let json = JSON.parse(data);
        } catch(e) {
            console.log(err);
            res.sendStatus(500);
            return;
        }

        for (let i = 0; i < json.length; i++) {
            if (json[i].id === chosenNoteToDelete) {
                json.splice(i, 1);
                return;
            }
        }

        fs.writeFile(__dirname + "/db/db.json", JSON.stringify(json), (err) => {
            if (err) {
                console.log(err);
                res.sendStatus(500);
                return;
            }
            res.send("Successfully deleted");
        });
    });
});

---

А вот более чистая реализация, использующая fs.promises и async/await с более централизованной обработкой и обнаружением ошибок, если selectedNote не найдено:

const fsp = require('fs').promises;
const path = require('path');

app.delete("/api/notes/:id", async (req, res) => {
    let chosenNoteToDelete = req.params.id;
    let dataFilename = path.join(__dirname, "/db/db.json");
    try {
        let data = await fsp.readFile(dataFilename);
        let dataArray = JSON.parse(data);
        // iterate array backwards so .splice() doesn't cause us to miss elements of the array
        let found = false;
        for (let i = dataArray.length - 1; i >= 0; i--) {
            if (dataArray[i].id === chosenNoteToDelete) {
                found = true;
                dataArray.splice(i, 1);
            }
        }
        if (found) {
            await fsp.writeFile(dataFilename, JSON.stringify(dataArray));
            res.send("Successfully deleted");
        } else {
            res.status(404).send(`Note id ${chosenNoteToDelete} not found.`);
        }

    } catch(e) {
        console.log(e);
        res.sendStatus(500);
    }
});