Making HTTP requests with Axios in TypeScript

参考文档: https://bobbyhadz.com/blog/typescript-http-request-axios#making-http-post-requests-with-axios-in-typescript

Make sure to install axios before using the code samples in the article.

You can install axios by opening your terminal in your project’s root directory and running the npm install axios command.

安装axios:

# 👇️ if you need to initialize a package.json file
npm init -y

# ✅ with NPM
npm install axios

# ✅ with YARN
yarn add axios

Axios includes TypeScript definitions, so we don’t have to install them separately.

Making HTTP GET requests with Axios in TypeScript

Here is an example of an HTTP GET request using axios in TypeScript.

index.ts

import axios from 'axios';

type User = {
  id: number;
  email: string;
  first_name: string;
};

type GetUsersResponse = {
  data: User[];
};

async function getUsers() {
  try {
    // 👇️ const data: GetUsersResponse
    const { data, status } = await axios.get<GetUsersResponse>(
      'https://reqres.in/api/users',
      {
        headers: {
          Accept: 'application/json',
        },
      },
    );

    console.log(JSON.stringify(data, null, 4));

    // 👇️ "response status is: 200"
    console.log('response status is: ', status);

    return data;
  } catch (error) {
    if (axios.isAxiosError(error)) {
      console.log('error message: ', error.message);
      return error.message;
    } else {
      console.log('unexpected error: ', error);
      return 'An unexpected error occurred';
    }
  }
}

getUsers();

If you get the error “Cannot find module ‘axios’”, click on the following article and follow the installation instructions.

We defined the type for the response we expect from the server and provided it when using the axios.get method.

The first argument the axios.get() method takes is the URL.

axios.get(url, config)

The second argument is a request config object and is not required.

I only included the second argument because you might be making HTTP GET requests to an API that requires authorization. In this case, you might need to set an Authorization header.

If you need to check the response schema, look at this section of the axios GitHub repository.

response_schema.js

{
  // `data` is the response from the server
  data: {},

  // `status` is the HTTP status code from the server response
  status: 200,

  // `statusText` is the HTTP status message from the server response
  statusText: 'OK',

  // `headers` the HTTP headers that the server responded with
  // All header names are lowercase and can be accessed using the bracket notation.
  // Example: `response.headers['content-type']`
  headers: {},

  // `config` is the config that was provided to `axios` for the request
  config: {},

  // `request` is the request that generated this response
  request: {}
}

We destructured the data property from the axios response schema.

const { data, status } = await axios.get<GetUsersResponse>(
  'https://reqres.in/api/users',
  {
    headers: {
      Accept: 'application/json',
    },
  },
);

The data property is the response that was provided by the server.

Another property you might need to use from the response object is status. It represents the status code from the server’s response, e.g. 200 or 404.

Axios includes a type guard for errors which we used in our catch method.

catch (error) {
  if (axios.isAxiosError(error)) {
    console.log('error message: ', error.message);
    return error.message;
  } else {
    console.log('unexpected error: ', error);
    return 'An unexpected error occurred';
  }
}

If the error is an axios error, we can safely access the message property to get the error message.

Otherwise, the error is typed as unknown and we have to manually check before accessing any properties.

What you might have noticed is that axios automatically parses the JSON from the response as opposed to the built-in fetch() method.

We directly have the parsed response stored in the data variable.

If you want to use the built-in fetch module to make HTTP requests in TypeScript, check out my other article.

Making HTTP POST requests with Axios in TypeScript

Let’s look at an example HTTP POST request made with axios in TypeScript.

I’ll post the entire code snippet and then we’ll go over it.

import axios from 'axios';

type CreateUserResponse = {
  name: string;
  job: string;
  id: string;
  createdAt: string;
};

async function createUser() {
  try {
    // 👇️ const data: CreateUserResponse
    const { data, status } = await axios.post<CreateUserResponse>(
      'https://reqres.in/api/users',
      { name: 'John Smith', job: 'manager' },
      {
        headers: {
          'Content-Type': 'application/json',
          Accept: 'application/json',
        },
      },
    );

    console.log(JSON.stringify(data, null, 4));

    console.log(status);

    return data;
  } catch (error) {
    if (axios.isAxiosError(error)) {
      console.log('error message: ', error.message);
      // 👇️ error: AxiosError<any, any>
      return error.message;
    } else {
      console.log('unexpected error: ', error);
      return 'An unexpected error occurred';
    }
  }
}

createUser();

We used the axios.post method to make an HTTP POST request.

axios.post(url, data, config)

We passed the type of the expected response as a generic to the axios.post() method.

const { data, status } = await axios.post<CreateUserResponse>(
  'https://reqres.in/api/users',
  { name: 'John Smith', job: 'manager' },
  {
    headers: {
      'Content-Type': 'application/json',
      Accept: 'application/json',
    },
  },
);

Notice that we passed the request body as the second argument to the post() method.

axios.post(url, data, config)

We don’t have to pass the request body to the JSON.stringify() method as axios automatically takes care of this.

For demonstration purposes, we also included the third parameter which is the configuration for the HTTP request.

We included an object containing the request headers.

If your remote API requires authentication, you might need to set an Authorization header that points to a JSON web token.

You can look at the other possible values in the request config by visiting the axios GitHub repository.

You commonly have to use the status property from the response to check what status code the server responded with.

response_schema.js

{
  // `data` is the response from the server
  data: {},

  // `status` is the HTTP status code from the server response
  status: 200,

  // `statusText` is the HTTP status message from the server response
  statusText: 'OK',

  // `headers` the HTTP headers that the server responded with
  // All header names are lowercase and can be accessed using the bracket notation.
  // Example: `response.headers['content-type']`
  headers: {},

  // `config` is the config that was provided to `axios` for the request
  config: {},

  // `request` is the request that generated this response
  request: {}
}

Making HTTP PATCH requests with Axios in TypeScript

Let’s look at an example HTTP PATCH request made with axios in TypeScript.

import axios from 'axios';

type UpdateUserResponse = {
  name: string;
  job: string;
  updatedAt: string;
};

async function updateUser() {
  try {
    // 👇️ const data: UpdateUserResponse
    const { data } = await axios.patch<UpdateUserResponse>(
      'https://reqres.in/api/users/2',
      { name: 'John Smith', job: 'manager' },
      {
        headers: {
          'Content-Type': 'application/json',
          Accept: 'application/json',
        },
      },
    );

    console.log(JSON.stringify(data, null, 4));

    return data;
  } catch (error) {
    if (axios.isAxiosError(error)) {
      console.log('error message: ', error.message);
      // 👇️ error: AxiosError<any, any>
      return error.message;
    } else {
      console.log('unexpected error: ', error);
      return 'An unexpected error occurred';
    }
  }
}

updateUser();

The axios.patch method is very similar to axios.post and takes the same 3 parameters:

The URL
The request body
The request config object

axios.patch(url, data, config)

The HTTP PATCH method is usually used to update a resource.

const { data } = await axios.patch<UpdateUserResponse>(
  'https://reqres.in/api/users/2',
  { name: 'John Smith', job: 'manager' },
  {
    headers: {
      'Content-Type': 'application/json',
      Accept: 'application/json',
    },
  },
);

The signature of the axios.patch method is the same as axios.post.

The method takes the data as the second argument and automatically converts it to JSON, so we don’t have to use the JSON.stringify() method manually.

We only destructured the data property from the response in the examples, but you might have to use other properties from the response.

You can look at the other possible values in the request config by visiting the axios GitHub repository.

response_schema.js

{
  // `data` is the response from the server
  data: {},

  // `status` is the HTTP status code from the server response
  status: 200,

  // `statusText` is the HTTP status message from the server response
  statusText: 'OK',

  // `headers` the HTTP headers that the server responded with
  // All header names are lowercase and can be accessed using the bracket notation.
  // Example: `response.headers['content-type']`
  headers: {},

  // `config` is the config that was provided to `axios` for the request
  config: {},

  // `request` is the request that generated this response
  request: {}
}

Making HTTP PUT requests with Axios in TypeScript

For completeness’ sake, let’s look at an example HTTP PUT request made with axios in TypeScript.

I’ll post the entire code snippet and then we’ll go over it.

import axios from 'axios';

type UpdateUserResponse = {
  name: string;
  job: string;
  updatedAt: string;
};

async function updateUser() {
  try {
    // 👇️ const data: UpdateUserResponse
    const { data } = await axios.put<UpdateUserResponse>(
      'https://reqres.in/api/users/2',
      { name: 'John Smith', job: 'manager' },
      {
        headers: {
          'Content-Type': 'application/json',
          Accept: 'application/json',
        },
      },
    );

    console.log(JSON.stringify(data, null, 4));

    return data;
  } catch (error) {
    if (axios.isAxiosError(error)) {
      console.log('error message: ', error.message);
      // 👇️ error: AxiosError<any, any>
      return error.message;
    } else {
      console.log('unexpected error: ', error);
      return 'An unexpected error occurred';
    }
  }
}

updateUser();

The only thing that changed in the code sample is that instead of using axios.patch, we used axios.put.

axios.put(url, data, config)

The axios.put method is very similar to axios.patch and both methods share the same signature.

const { data } = await axios.put<UpdateUserResponse>(
  'https://reqres.in/api/users/2',
  { name: 'John Smith', job: 'manager' },
  {
    headers: {
      'Content-Type': 'application/json',
      Accept: 'application/json',
    },
  },
);

Making HTTP DELETE requests with Axios in TypeScript

Let’s look at an example HTTP DELETE request made with axios in TypeScript.

import axios from 'axios';

type DeleteUserResponse = '';

async function deleteUser() {
  try {
    // 👇️ const data: UpdateUserResponse
    const { data, status } = await axios.delete<DeleteUserResponse>(
      'https://reqres.in/api/users/2',
      {
        headers: {
          Accept: 'application/json',
        },
      },
    );

    console.log('response is: ', data);

    // 👇️ response status is: 204
    console.log('response status is: ', status);

    return data;
  } catch (error) {
    if (axios.isAxiosError(error)) {
      console.log('error message: ', error.message);
      // 👇️ error: AxiosError<any, any>
      return error.message;
    } else {
      console.log('unexpected error: ', error);
      return 'An unexpected error occurred';
    }
  }
}

deleteUser();

The API I’m using in the examples sends an empty string as a response for an HTTP delete request.

Most APIs return a 204 “No Content” status when an HTTP Delete request is made.

You can check if the response is not empty before trying to access any properties.

Some APIs send back an empty response on HTTP DELETE requests and others send back the deleted item.

The 2 parameters the axios.delete method takes are the URL and the request config object.

axios.delete(url, config)

We only destructured the data property from the response in the examples, but you might have to use other properties from the response.

You can look at the other possible values in the request config by visiting the axios GitHub repository.

response_schema.js

{
  // `data` is the response from the server
  data: {},

  // `status` is the HTTP status code from the server response
  status: 200,

  // `statusText` is the HTTP status message from the server response
  statusText: 'OK',

  // `headers` the HTTP headers that the server responded with
  // All header names are lowercase and can be accessed using the bracket notation.
  // Example: `response.headers['content-type']`
  headers: {},

  // `config` is the config that was provided to `axios` for the request
  config: {},

  // `request` is the request that generated this response
  request: {}
}

If you’d rather use the built-in fetch module to make HTTP requests in TypeScript, check out the following article.