Js Await Async in for Loop

using await-async in a for loop in JavaScript

async function fetchData(urls) {
  for (const url of urls) {
    try {
      const response = await fetch(url);
      const data = await response.json();
      console.log(`Data from ${url}:`, data);
    } catch (error) {
      console.error(`Error fetching data from ${url}:`, error);
    }
  }
}

const urls = [
  'https://jsonplaceholder.typicode.com/posts/1',
  'https://jsonplaceholder.typicode.com/posts/2',
  'https://jsonplaceholder.typicode.com/posts/3',
];

fetchData(urls);

fetchData is an async function that takes an array of URLs.
It loops through the urls array, and for each url, it waits for the fetch call to resolve using await.
The result of the fetch is then parsed as JSON using await response.json(), and the data is logged.
This ensures that each fetch operation waits for the previous one to complete before moving to the next URL in the loop.

BBMCode

Nodejs Mongoose Connection

set up and manage a connection to MongoDB using Mongoose.

// Import Mongoose
const mongoose = require('mongoose');

// MongoDB connection URI
const mongoURI = 'mongodb://localhost:27017/your_database_name'; // Replace with your actual URI and database name

// Mongoose connection options
const options = {
  useNewUrlParser: true,    // Use new URL string parser instead of deprecated one
  useUnifiedTopology: true, // Use new server discovery and monitoring engine
  useCreateIndex: true,     // Use MongoDB's createIndex() function
  useFindAndModify: false,  // Use native findOneAndUpdate() rather than findAndModify()
};

// Connect to MongoDB
mongoose.connect(mongoURI, options)
  .then(() => {
    console.log('Connected to MongoDB successfully!');
  })
  .catch((error) => {
    console.error('Error connecting to MongoDB:', error);
  });

// Optional: Handle connection events
const db = mongoose.connection;

db.on('error', (error) => {
  console.error('MongoDB connection error:', error);
});

db.on('disconnected', () => {
  console.log('MongoDB disconnected');
});

// Handle process termination, close Mongoose connection
process.on('SIGINT', async () => {
  await mongoose.connection.close();
  console.log('MongoDB connection closed due to app termination');
  process.exit(0);
});

BBMCode

Vuejs Use v-bind for prop destructuring

Use v-bind as kind of a “prop destructuring” instead of passing multiple object properties into a component as props.

<template>
  <post
    :id="post.id"
    :title="post.title"
    :author="post.author"
  />
  
  <!-- This (↑) is the same as this (↓) -->

  <post v-bind="post" />
</template>

<script>
// <post> component definition
export default {
  props: {
    id: Number,
    title: String,
    author: Object
  }
}
</script>

Caleb Porzio

Vuejs Manage Document Title

Update the document’s title with reactive data.

<script>
new Vue({
  el: '#app',
  data: () => ({
    documentTitle: document.title
  }),
  watch: {
    documentTitle: {
      immediate: true,
      handler (value) {
        document.title = value
      }
    }
  }
})
</script>

Since the root Vue instance is almost always initialized on a child element of <body>, we don’t have access to elements in <head>. The solution is actually very simple: to watch a data attribute that corresponds to the document title, and then use DOM functions for updating.

This is only a proof of concept. If you want full power over a document’s meta with SSR support, take a look at vue-meta.

BBMCode

Vuejs Methods to computed properties

When you find yourself in need of using an argument for a computed property, consider creating and moving the logic into a child component.

<!-- BEFORE -->
<template>
  <section class="posts">
    <article v-for="post in posts">
      <a :href="getUrl(post)">{{ getTitle(post) }}</a>
    </article>
  </section>
</template>

<script>
export default {
  methods: {
    getUrl (post) { ... },
    getTitle (post) { ... }
  }
}
</script>


<!-- AFTER -->
<!-- 1. PostList.vue -->
<template>
  <section class="posts">
    <PostItem v-for="post in posts" :post="post"/>
  </section>
</template>

<!-- 2. PostItem.vue -->
<template>
  <article v-for="post in posts">
    <a :href="url">{{ title }}</a>
  </article>
</template>

<script>
export default {
  props: ['post'],
  computed: {
    url () { /* compute on this.post */ },
    title () { /* compute on this.post */ }
  }
}
</script>

This results in simpler and decoupled components, structured and moduralized code, plus you have the benefits of computed property’s caching for free.

BBMCode

Vuejs Long press directive

A simple directive to execute a function when the element is long-pressed.

<template>
  <button v-longpress='showOptions'>Hold me for a while</button>
</template>

<script>
const PRESS_TIMEOUT = 1000

Vue.directive('longpress', {
  bind: function (el, { value }, vNode) {
    if (typeof value !== 'function') {
      console.warn(`Expect a function, got ${value}`)
      return
    }

    let pressTimer = null

    const start = e => {
      if (e.type === 'click' && e.button !== 0) {
        return;
      }

      if (pressTimer === null) {
        pressTimer = setTimeout(() => value(e), PRESS_TIMEOUT)
      }
    }

    const cancel = () => {
      if (pressTimer !== null) {
        clearTimeout(pressTimer)
        pressTimer = null
      }
    }

    ;['mousedown', 'touchstart'].forEach(e => el.addEventListener(e, start))
    ;['click', 'mouseout', 'touchend', 'touchcancel'].forEach(e => el.addEventListener(e, cancel))
  }
})
</script>

A more in-depth article with commented code can be found here.

Nosakhare Obaseki

Vuejs Smarter Watchers

Watchers that are called immediately when the component is ready.

watch: {
  searchText: {
    handler: 'fetchUserList',
    immediate: true
  }
},

methods: {
  fetchUserList () {
    //
  }
}

Chris Fritz

Vuejs Fetch and display HTML

Sometimes you just want to fetch some HTML from the server, display them right in your application, and call it done.

<template>
  <html-fetcher url="/your/static/content.html"/>
</template>

<script>
import axios from 'axios'

Vue.component('html-fetcher', {
  template: '<div>Loading…</div>',
  props: ['url'],
  mounted () {
    axios.get(this.url).then(({ data }) => this.$el.outerHTML = data)
  }
})
</script>

BBMCode

Vuejs Detect if user has scrolled to bottom

Detect if the user has scrolled to bottom of a container element and executed a function.

<template>
  <div @scroll="onScroll"></div>
</template>

<script>
export default function () {
  methods: {
    onScroll ({ target: { scrollTop, clientHeight, scrollHeight }}) {
      if (scrollTop + clientHeight >= scrollHeight) {
        this.loadMorePosts()
      }
    }
  }
}
</script>