The best approach to integrating Axios with TypeScript

I'm facing an issue in my application that I've been struggling to resolve. My setup involves using axios combined with TypeScript. Here's a snippet of the code where the problem lies:

export const fetchTransactions = (PageNum: number, PageSize: number, Context_id: number) => new Promise<Transaction[]> (async (resolve, reject) => {

  try
  {
    const response = await axios.post<AxiosResponse<Transaction[]>>(FETCH_TRANSACTIONS_URL, {PageNum, PageSize, Context_id})
    const {transactions} = response.data
    resolve(transactions)
  }
  catch (error) {
    reject(error.response);
  }
})

The specific error message I encounter at 

const {transactions} = response.data
is shown in this screenshot: https://i.sstatic.net/McvkU.png

Any suggestions on how to resolve this error? What should be the appropriate type for the response?

typescriptaxiosreact-typescript

Answer №1

When working with Typescript, my typical approach using axios is as follows:

const fetchTransactions = (PageNum: number, PageSize: number, Context_id: number): Promise<Transaction[]> =>
  axios
    .post<Transaction[]>(FETCH_TRANSACTIONS_URL, {PageNum, PageSize, Context_id})
    .then((response) => {
      if (response.status >= 200 && response.status < 300) {
        return response.data;
      }
      throw new Error(response.status.toString());
    })
    .catch(({ response }) => {
      throw new Error(response.status);
    });

Answer №2

I decided to avoid manually typing out the extensive JSON structure in my Typescript code. Instead, I opted for AxiosPromise which successfully handled the request:

export class MyComponent {
  public sales: any;

  constructor() {
    const response = await axios.get<AxiosPromise>( base_api_url + '/sales')
    console.log(response.data);
    this.sales = response.data;
  }
}

}

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

The Angular 9 custom directive is malfunctioning on mobile devices

I recently created a custom directive in Angular 9 that allows users to input only digits and one decimal point. While the directive works perfectly on desktop, it seems not to function at all on mobile devices - almost as if it doesn't exist within t ...

javascriptangulartypescriptangular9mobile-browser

Module '. ' or its corresponding type declarations cannot be located

While working on my project with TypeScript and using Cheerio, I encountered an issue when trying to compile it with TSC. The compiler threw the following exception: error TS2307: Cannot find module '.' or its corresponding type declarations. 2 ...

node.jstypescriptnpmes6-modulescheerio

Is it possible that an error is triggered when utilizing canActivate or canChildActivate?

A problem has arisen while using canActivateChild or canActivate in the child route. Despite working fine previously, an error is now being thrown: ERROR in src/app/app-routing.module.ts(8,7): error TS2322: Type '({ path: string; redirectTo: string; ...

angulartypescript

Sorry, it seems like there is an issue with the Typescript error that states: "The expression you are trying to call is not valid. The type 'typeof import("koa-session")

Partially resolved: An issue has been identified on Github regarding this problem. It seems that declaring a module in a global scope rewrites the types of the entire exported module, while declaring a module within another module merges the types. This b ...

node.jstypescript

TypeScript causing issues when multiple selectors are used

Currently, I have a function that allows me to search for HTML elements based on text content: function findElementsByText(text: string): HTMLElement[] { const selectors = 'button' // This conditional statement ensures that an empty text quer ...

typescript

Issue with binding nested ViewModels/components in Knockoutjs using TypeScript does not resolve

Struggling with implementing a viewModel within another viewModel in knockout. Any assistance would be greatly appreciated. Using typescript and aiming to have a list of address controls, each with their individual viewmodel. Initially, the project functi ...

typescriptknockout.jsweb-component

Creating new Angular2 Observables - Subscribing to undefined developments

Is it a scoping issue or a problem with how my observables are set up? Can you assist me in figuring it out? To explain my logic: My goal is to first check if the data is available locally before making an http.get request for it. I want to return the loc ...

angularjstypescriptangularrxjs

Encountering difficulty when trying to initiate a new project using the Nest CLI

Currently, I am using a tutorial from here to assist me in creating a Nest project. To start off, I have successfully installed the Nest CLI by executing this command: npm i -g @nestjs/cli https://i.stack.imgur.com/3aVd1.png To confirm the installation, ...

javascriptnode.jstypescriptnpmnestjs

An issue arises in VueJS when employing brackets and the replace function in Typescript

My journey with the Typescript language has just begun, and I am excited to dive deeper into it. Currently, I am working on a SPA-Wordpress project as a hobby using Vite (VueJS). However, I am facing some challenges with the syntax when transitioning from ...

typescriptvue.jsbracketsdot-notation

Issue with displaying response data from Angular API in the template

I am retrieving categories from the backend and trying to display them in a table. However, there seems to be an issue with my code as no data is showing up in the table. Although the getFournisseurs method is successfully fetching 5 items from the backen ...

htmlangulartypescriptspringdisplay

How to leverage async/await within loops in Node.js for optimized performance and efficiency

Hey there, I'm working on my nodejs api where I need to fetch data inside a loop and then perform another loop to save data in a different table. Can anyone guide me on how to achieve this? Below is a snippet of what I have attempted so far without su ...

javascriptnode.jstypescriptloopsasync-await

Is there a way to retrieve the value of an option passed by serverless CLI in serverless.ts file?

As I explored the serverless framework with serverless.ts for configuration, a certain question came to mind. When utilizing the serverless CLI, passing values can be done in the following way: serverless offline --stage prod In the serverless.yml file, ...

typescriptyamlserverless

What are some best practices for managing object-level variables in TypeScript and Vue.js?

Uncertain about the optimal approach, I am looking to create a component and leverage some object level variables. Consider the example below: import Vue from "vue" import * as paper from "paper" export default Vue.extend({ template: ` <d ...

javascripttypescriptvue.jsvuejs2

How is it possible for a TypeScript function to return something when its return type is void?

I find the book Learning JavaScript to be confusing. It delivers conflicting information regarding the use of void as a return type in functions. const foo = (s: string): void => { return 1; // ERROR } At first, it states that if a function has a re ...

typescript

Is it possible to invoke a function exclusively on the center item within an ngx-owl-carousel?

Is there a way to call a function only when an element is in the center of a slider? This is my HTML: <owl-carousel-o [options]="customOptions"> <ng-container *ngFor="let slide of slides"> <ng-template carous ...

angulartypescriptowl-carousel

Toggle the visibility of a dropdown menu based on the checkbox being checked or unchecked

One challenge I am facing involves displaying and hiding DropDown/Select fields based on the state of a Checkbox. When the checkbox is checked, the Dropdown should be visible, and when unchecked, it should hide. Below is the code snippet for this component ...

reactjstypescriptcheckboxmaterial-uishow-hide

Troubleshooting: Vue.js file upload encountering OPTIONS 404 error

In my express app, I have configured CORS and most of the routes are working fine. However, I'm facing an issue with a specific component used for uploading images: <input type="file" class="form-control" @change="imageChanged"> <div @clic ...

javascriptnode.jsexpressvue.jsaxios

Can you explain the significance of using curly braces in an import statement?

The TypeScript handbook has a section on Shorthand Ambient Modules, where an import statement is shown as: import x, {y} from "hot-new-module"; It doesn't explain why y is in curly braces in the above statement. If both x and y were inside the brace ...

typescript

JSDoc encounters issues when processing *.js files that are produced from *.ts files

I am currently working on creating documentation for a straightforward typescript class: export class Address { /** * @param street { string } - excluding building number * @param city { string } - abbreviations like "LA" are acceptable ...

javascripttypescriptjsdoc

NextJS and AWS Amplify collaboration for secure authentication routing

After hours of research, I'm struggling to navigate the authentication routing in NextJS combined with AWS Amplify. As a newcomer to NextJS, I want to implement a feature that disables the login/register page for users who are already logged in and pr ...

typescriptnext.jsamazon-cognitoaws-amplifynext.js13