在 TypeScript 中使用 Axios 发出 Http 请求

作者

目录

Making Http requests with Axios in TypeScript

  1. 在 TypeScript 中使用 Axios 发出 Http GET 请求
  2. 在 TypeScript 中使用 Axios 发出 Http POST 请求
  3. 在 TypeScript 中使用 Axios 发出 Http PATCH 请求
  4. 在 TypeScript 中使用 Axios 发出 Http PUT 请求
  5. 在 TypeScript 中使用 Axios 发出 Http DELETE 请求

在 TypeScript 中使用 Axios 发出 Http GET 请求

请确保axios在使用本文中的代码片段之前进行安装。

您可以axios通过在项目的根目录中打开终端并运行npm install axios命令来进行安装。

壳
npm install axios
Axios 包含 TypeScript 定义，因此我们不必单独安装它们。

这是在 TypeScript 中使用的 HTTPGET请求的示例。axios

索引.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();

我们定义了我们期望从服务器获得的响应的类型，并在使用axios.get
方法时提供了它。

如您所见，我们传递给该axios.get()方法的第一个参数是 url。

第二个参数是
请求配置对象，不是必需的。

我只包含了第二个参数，因为您可能正在向需要授权的 API 发出 HTTP 请求。在这种情况下，您可能需要设置标题。 GETAuthorization

如果您需要检查响应模式，请查看
axios GitHub 存储库的这一部分。

我们data从 axios 响应模式中解构了属性。

该data属性是服务器提供的响应。

您可能需要从响应对象使用的另一个属性是。它表示来自服务器响应的状态代码，例如或。 status200404

Axios 包含一个错误类型保护，我们在我们的catch方法中使用了它。

如果错误是一个axios错误，我们可以安全地使用该message属性来获取错误消息。否则，错误类型为unknown，我们必须在访问任何属性之前手动检查其类型。

您可能已经注意到axios，与内置fetch() 方法相反，它会自动从响应中解析 JSON。

在 TypeScript 中使用 Axios 发出 Http POST 请求

让我们看一下在 TypeScript 中发出的 HTTPPOST请求示例。axios

我将发布整个代码片段，然后我们将讨论它。

索引.ts
import axios from 'axios';

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

async function createUser() {
  try {
    // 👇️ const data: CreateUserResponse
    const { data } = 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));

    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();

我们使用
axios.post方法发出 HTTPPOST请求。

我们将预期响应的类型作为泛型传递给该axios.post()
方法。

请注意，我们将请求主体作为第二个参数传递给该方法。 post()

我们不必将请求主体传递给JSON.stringify()方法，因为
axios它会自动处理。

出于演示目的，我们还包含了第三个参数，即 HTTP 请求的配置。

我们包含了一个包含请求标头的对象。如果您的远程 API 需要身份验证，您可能需要设置一个Authorization指向 json 网络令牌的标头。

您可以通过访问
axios GitHub 存储库查看请求配置中的其他可能值。

在 TypeScript 中使用 Axios 发出 Http PATCH 请求

让我们看一下在 TypeScript 中发出的 HTTPPATCH请求示例。axios

索引.ts
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();

axios.patch
方法非常类似于——它采用完全相同的参数：axios.post3

  1. （url将用于请求的服务器 url）
  2. 请求体
  3. 请求配置对象

在 TypeScript 中使用 Axios 发出 Http PUT 请求

为了完整起见，让我们看一下在 TypeScript中发出的示例 HTTPPUT请求
。axios

我将发布整个代码片段，然后我们将讨论它。

索引.ts
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();

代码片段中唯一改变的是
axios.patch我们现在使用
axios.put而不是使用。

在 TypeScript 中使用 Axios 发出 Http DELETE 请求

让我们看一下在 TypeScript 中发出的 HTTPDELETE请求示例。axios

索引.ts
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();

我在示例中使用的 API 发送一个空字符串作为对
HTTP删除请求的响应。

大多数 API204在发出 HTTP 删除请求时返回“无内容”状态。

axios.delete方法采用的 2 个参数
是 url 和请求配置对象。

–

发表评论