Using Vue.js to invoke an asynchronous function from an external JavaScript file

I'm currently working on creating a .js file that includes some async calls. I've got everything set up in the file, but when I try to call my method, I'm not seeing any results. It's a new process for me to call from a .js file, so I'm unsure of what mistakes I might be making.

Below is the content of my inventory.js file:

import axios from "axios";

let getInventories = async () => {
  const result = await axios
    .get("/inventories")
    .catch((error) => console.log(error));
}

export {getInventories}

And here's the call from my Inventory.vue file:

import axios from "axios";
import { bus } from "../app";
import {getInventories} from './inventory';
export default {
  mounted() {
    let temp =  getInventories();
    debugger;
  },
}

The variable 'temp' isn't returning anything. I tried adding an 'await' in front of getInventories but encountered an error.

Answer №1

Don't forget to include the return statement for the result :

const fetchInventories = async () => {
   try{
    const response = await axios
    .get("/inventories")
    return response.data;
   } catch(err){
   console.log(err);
   return null;
   };
}

export {fetchInventories}

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Find out which way the user is scrolling in your React js application

I'm struggling to determine whether the scroll event is moving up or down, and I haven't been able to find a solution yet. import React, { useState, useEffect } from "react"; import { Link } from "react-router-dom"; const Nav ...

Ways to authenticate various fields with identical names in vue.js

I am facing an issue where input fields with the same name are displaying errors when one of them is invalid. Is there a better way to handle this situation? <tr v-for="(form, index) in forms" :key="index"> ...

Issue: The hydration process has failed due to a discrepancy between the initial UI and the server-rendered content when utilizing the Link element

Exploring Next.js, I stumbled upon the <Link/> component for page navigation. However, as I utilize the react-bootstrap library for my navbar, it offers a similar functionality with Nav.Link. Should I stick to using just Link or switch to Nav.Link? ...

Linking two div elements together with a circular connector at the termination point of the line

I am currently working on designing a set of cards that will showcase a timeline. I envision these cards to be connected by lines with circles at each end, for a visually appealing effect. At the moment, I have created the cards themselves but I am struggl ...

Modify the color of the text input by the user in an AJAX-enhanced text box

After successfully implementing an autocomplete textbox using AJAX Autocomplete, I decided to enhance the feature with some Fuzzy logic. Now, as the user enters 3 characters, my database returns a list of records that match those characters. The search re ...

What is the best way to limit a plugin to only one version of jQuery when there are 2 versions included on a page?

As I develop a piece of Javascript code to embed into my client's websites, I have concerns about potential conflicts with other versions of jQuery that they may be using. While I have found some guidance in the jQuery documentation, implementing it l ...

WebStorm: React and Bootstrap autocomplete feature fails to function

After installing React and Bootstrap in WebStorm, I encountered an issue where the Bootstrap code highlighting was not working. Despite JSX functioning correctly, the problem with Bootstrap remains unresolved. Can anyone provide guidance on how to resolve ...

Head styles for tinyMCE

When viewing the tinyMCE example on the official website using Firefox, you may notice the editor blinking. This issue seems to only occur in Firefox, possibly due to external CSS files for the editor. I am considering adding all CSS rules directly into th ...

Double Looping of Ajax on Shopify Order Form

I have an Ajax order form on a product page. Every time the #submit-table button is clicked, it should display a drop-down menu with updated cart information, such as quantities and prices, along with the newly added products. Here's an example of th ...

What is the best way to automatically redirect to a different page once a video has finished playing after 10 seconds?

I'm working on creating an HTML page that will automatically redirect after 10 seconds once a video has finished playing. The issue I'm facing is that the page is currently redirecting as soon as it loads, rather than waiting for the video to fin ...

How can you show a green check mark next to an input field in AngularJS after inputting valid data?

I am diving into the world of AngularJS and Angular Material with my web application. As a beginner in AngularJS and Angular Material, I need some help. My current task is to display a green checkmark next to an input field only when valid data is entere ...

What is the process for retrieving the AJAX response text?

When it comes to my AJAX development, I rely on prototype and utilize the following code: somefunction: function(){ var result = ""; myAjax = new Ajax.Request(postUrl, { method: 'post', postBody: postData, content ...

Refresh text displayed on a button with the help of setInterval

I need help updating the text on a button with the id fixed-button at regular intervals. Here is the code I am currently using: <script type="text/javascript"> $(function() { $('#fixed-button').setInterval(function() { ...

Tips for preserving checkbox state?

I am currently working on a web application project for a clinic and laboratory, specifically focusing on sending tests. I have implemented the code below to select the test category first, followed by the test name related to that category. However, when ...

Remove text on the canvas without affecting the image

Is there a way to remove text from my canvas element without losing the background image of the canvas? I'm considering saving the Image source and reapplying it to the Canvas Element after using clearRect, but I'm unsure how to execute this sol ...

When downloading files that I uploaded to Google Drive using React Native, I noticed that the file size is not consistent with the original file

Greetings Everyone! I am aiming to transfer the database (RealmJS) that is currently stored on my device storage to Google Drive using Google Drive API V3. To accomplish this, I have already installed various node modules such as react-native-fs and @reac ...

Vuelidate Error when using axios

While conducting a duplicate test on a user using vuelidate, I encountered a TypeError related to errors[0].$message. This error appears in a p tag that is only rendered when there is an error present. Below is the code snippet: <template> <v ...

A solitary outcome yielded by the JSON iteration

Can anyone help me understand why this code is only returning 1 result instead of 4? I am trying to retrieve all the post titles in the category with ID 121, but it seems to only display the most recent post title. <script type="text/javascript> ...

Combine two elements in an array

I am faced with a challenge in binding values from an Array. My goal is to display two values in a row, then the next two values in the following row, and so on. Unfortunately, I have been unable to achieve this using *ngFor. Any assistance would be greatl ...

The functionality of updating the logo in the browser tabs is not functioning as expected in Vue.js 3

This is the code from my index.html: <!DOCTYPE html> <html lang=""> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE ...