使用FetchapiJavascript取消訂閱電子郵件

我有一個表單，我在其中輸入電子郵件，然后使用節點服務器上的 fetch api 在 user.json 檔案中“訂閱”它。我的任務是：

• 單擊“取消訂閱”按鈕后，實作從社區串列中取消訂閱的功能。為此，使用 http://localhost:3000/unsubscribe 端點發出 POST Ajax 請求。

我試圖制作該功能，但沒有成功，所以我洗掉了它。另外，我需要執行以下操作：

• 當對 http://localhost:3000/subscribe 和 http://localhost:3000/unsubscribe 端點的請求正在進行中時，在單擊“訂閱”和“取消訂閱”時阻止其他請求。此外，禁用它們（使用 disabled 屬性）并使用 opacity: 0.5 設定樣式。
  對我來說，ajax 請求、fetch 和 javascript 是新東西，所以我不太清楚如何完成這項任務，如果你能幫助我，我會很高興，提前致謝。

獲取訂閱代碼：

 import { validateEmail } from './email-validator.js'

export const sendSubscribe = (emailInput) => {
    const isValidEmail = validateEmail(emailInput)
    if (isValidEmail === true) {
        sendData(emailInput);
    }
}

export const sendHttpRequest = (method, url, data) => {
    return fetch(url, {
        method: method,
        body: JSON.stringify(data),
        headers: data ? {
            'Content-Type': 'application/json'
        } : {}
    }).then(response => {
        if (response.status >= 400) {
            return response.json().then(errResData => {
                const error = new Error('Something went wrong!');
                error.data = errResData;
                throw error;
            });
        }
        return response.json();
    });
};

const sendData = (emailInput) => {
    sendHttpRequest('POST', 'http://localhost:8080/subscribe', {
        email: emailInput
    }).then(responseData => {
        return responseData
    }).catch(err => {
        console.log(err, err.data);
        window.alert(err.data.error)
    });
}

來自路由節點服務器的 index.js：

const express = require('express');
const router = express.Router();
const FileStorage = require('../services/FileStorage');

/* POST /subscribe */
router.post('/subscribe', async function (req, res) {
  try {
    if (!req.body || !req.body.email) {
      return res.status(400).json({ error: "Wrong payload" });
    }

    if (req.body.email === '[email protected]') {
      return res.status(422).json({ error: "Email is already in use" });
    }

    const data = {email: req.body.email};
    await FileStorage.writeFile('user.json', data);
    await res.json({success: true})
  } catch (e) {
    console.log(e);
    res.status(500).send('Internal error');
  }
});

/* GET /unsubscribe */
router.post('/unsubscribe ', async function (req, res) {
  try {
    await FileStorage.deleteFile('user.json');
    await FileStorage.writeFile('user-analytics.json', []);
    await FileStorage.writeFile('performance-analytics.json', []);
    await res.json({success: true})
  } catch (e) {
    console.log(e);
    res.status(500).send('Internal error');
  }
});

module.exports = router;

user.json 檔案如下所示：

{"email":"[email protected]"}

這是我取消訂閱的嘗試：

export const unsubscribeUser = () => {
    try {
        const response =  fetch('http://localhost:8080/unsubscribe', {
          method: "POST"
        });
      
        if (!response.ok) {
          const message = 'Error with Status Code: '   response.status;
          throw new Error(message);
        }
      
        const data =  response.json();
        console.log(data);
      } catch (error) {
        console.log('Error: '   error);
      }
}

它給出了以下錯誤：

Error: Error: Error with Status Code: undefined
main.js:2 
main.js:2 POST http://localhost:8080/unsubscribe 404 (Not Found)

檔案存盤.js：

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

class FileStorage {
  static getRealPath(path) {
    return `${global.appRoot}/storage/${path}`
  }

  static async checkFileExist(path, mode = fs.constants.F_OK) {
    try {
      await fsp.access(FileStorage.getRealPath(path), mode);
      return true
    } catch (e) {
      return false
    }
  }

  static async readFile(path) {
    if (await FileStorage.checkFileExist(path)) {
      return await fsp.readFile(FileStorage.getRealPath(path), 'utf-8');
    } else {
      throw new Error('File read error');
    }
  }

  static async readJsonFile(path) {
    const rawJson = await FileStorage.readFile(path);
    try {
      return JSON.parse(rawJson);
    } catch (e) {
      return {error: 'Non valid JSON in file content'};
    }
  }

  static async writeFile(path, content) {
    const preparedContent = typeof content !== 'string' && typeof content === 'object' ? JSON.stringify(content) : content;
    return await fsp.writeFile(FileStorage.getRealPath(path), preparedContent);
  }

  static async deleteFile(path) {
    if (!await FileStorage.checkFileExist(path, fs.constants.F_OK | fs.constants.W_OK)) {
      return await fsp.unlink(FileStorage.getRealPath(path));
    }
    return true;
  }

}

module.exports = FileStorage;

uj5u.com熱心網友回復：

您應該考慮使用資料庫來處理對持久資料的 CRUD 操作。如果您必須使用檔案存盤，則有一個名為lowdb的平面檔案資料庫庫，可以使檔案的作業更容易。

至于防止重復請求，您可以跟蹤用戶是否已經發出請求。

let fetchBtn = document.getElementById('fetch')
let isFetching = false

fetchBtn.addEventListener('click', handleClick)

async function handleClick(){
  if (isFetching) return // do nothing if request already made
  isFetching = true
  disableBtn()
  const response = await fetchMock()
  isFetching = false
  enableBtn()
}

function fetchMock(){
    // const response = await fetch("https://example.com");
  return new Promise(resolve => setTimeout (() => resolve('hello'), 2000))
}

function disableBtn(){
  fetchBtn.setAttribute('disabled', 'disabled');
  fetchBtn.style.opacity = "0.5"
}
function enableBtn(){
  fetchBtn.removeAttribute('disabled');
  fetchBtn.style.opacity = "1"
}

<button type="button" id="fetch">Fetch</button>

標籤：javascript html 阿贾克斯 拿来

上一篇：一個類的多個實體的性能影響

下一篇：我如何在api資料之后交替行類