JSFiddle - React, Tailwind, and code Playground

by ph822720355

HTML

<script src="https://unpkg.com/vue@next"></script>
<div id="app">
    <h1>{{ message }}</h1>
    <button @click="updateMessage">Update Message</button>
  </div>

JavaScript

const { createApp, ref } = Vue;

    createApp({
      setup() {
        const message = ref('Hello, Vue 3 with async/await and fetch!');

        const postRequest = async (url, data) => {
          try {
            const response = await fetch(url, {
              method: 'POST',
              headers: {
                'Content-Type': 'application/json'
              },
              body: JSON.stringify(data)
            });
            if (!response.ok) {
              throw new Error('Network response was not ok');
            }
            return response.json();
          } catch (error) {
            console.error('Error:', error);
            return { success: false, message: error.message };
          }
        };

        const updateMessage = async () => {
          const step1Response = await postRequest('https://jsonplaceholder.typicode.com/posts', { step: 'Step 1' });
          message.value = step1Response.success !== false ? 'Step 1 completed!' : `Error: ${step1Response.message}`;

          const step2Response = await postRequest('https://jsonplaceholder.typicode.com/posts', { step: 'Step 2' });
          message.value = step2Response.success !== false ? 'Step 2 completed!' : `Error: ${step2Response.message}`;
        };

        return { message, updateMessage };
      }
    }).mount('#app');