迹忆客 专注技术分享

当前位置：主页 > 学无止境 > 编程语言 > TypeScript >
Python PHP Java Go TypeScript C++ Vba Node.js C语言 MATLAB

如何在 TypeScript 中发出 Http 请求

作者：迹忆客 最近更新：2022/10/24 浏览次数：

在 TypeScript 中发出 Http GET 请求

让我们看一下 TypeScript 中有多少 Http 请求的示例。

在撰写本文时，如果大家在 Node.js 中运行代码，则必须安装 node-fetch 包。

请注意 ，如果在 Node.js 中运行代码，则只需安装和导入 node-fetch，因为 fetch 是浏览器中的内置方法。

要安装 node-fetch 包，请在项目的根目录中打开终端并运行以下 2 个命令。

$ npm install node-fetch@2.6.1
$ npm install --save-dev @types/node-fetch@2.x

这是在 TypeScript 中发出 HTTP GET 请求的示例。

// 👇️ only necessary if running in Node.js
// (Remove this line if running in the browser)
import fetch from 'node-fetch';

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

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

async function getUsers() {
  try {
    // 👇️ const response: Response
    const response = await fetch('https://jiyik.com/api/users', {
      method: 'GET',
      headers: {
        Accept: 'application/json',
      },
    });

    if (!response.ok) {
      throw new Error(`Error! status: ${response.status}`);
    }

    // 👇️ const result: GetUsersResponse
    const result = (await response.json()) as GetUsersResponse;

    console.log('result is: ', JSON.stringify(result, null, 4));

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

getUsers();

我们传递给 fetch() 方法的第一个参数是资源的 url。

第二个参数是一个选项对象，我们在其中设置 HTTP 标头和请求方法（示例中为 GET）。

注意 ， fetch() 承诺不会拒绝 HTTP 错误，因此我们必须手动检查 response.ok 属性。

response.ok 属性包含一个布尔值，用于说明响应是否成功。

如果响应成功，我们必须调用 Response 接口上的 json 方法，将来自服务器的 JSON 解析为原生 JavaScript 对象。

我们使用类型断言来设置来自服务器的解析响应的类型。

在我们的 catch() 方法中，我们检查错误是否是 Error 对象的实例，因此我们可以安全地访问 message 属性。

否则错误被输入为未知，我们必须在访问任何属性之前手动检查其类型。

在 TypeScript 中发出 Http POST 请求

让我们看一下 TypeScript 中的 HTTP POST 请求示例。

我将发布整个代码片段，然后我们将对其进行讨论。

如果在浏览器中运行，请确保删除 fetch 导入。

// 👇️ only necessary if running in Node.js
// (Remove this line if running in the browser)
import fetch from 'node-fetch';

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

async function createUser() {
  try {
    // 👇️ const response: Response
    const response = await fetch('https://www.jiyik.com/api/users', {
      method: 'POST',
      body: JSON.stringify({
        name: 'John Smith',
        job: 'manager',
      }),
      headers: {
        'Content-Type': 'application/json',
        Accept: 'application/json',
      },
    });

    if (!response.ok) {
      throw new Error(`Error! status: ${response.status}`);
    }

    // 👇️ const result: CreateUserResponse
    const result = (await response.json()) as CreateUserResponse;

    console.log('result is: ', JSON.stringify(result, null, 4));

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

createUser();

注意 ，我们这次将 http 方法设置为 POST。

我们添加了一个请求正文并使用 JSON.stringify() 方法将对象转换为 JSON 字符串，我们可以通过网络发送该字符串。

我们还添加了 Content-Type http 头来通知服务器 POST 请求中的数据是 JSON 字符串。

在通过网络发送 JSON 数据时，请确保始终将 Content-Type 标头设置为 application/json，否则可能会出现令人困惑的错误。

在 TypeScript 中发出 Http PATCH 请求

让我们看一个使用 TypeScript 中的 fetch 发出的 HTTP PATCH 请求示例。

// 👇️ only necessary if running in Node.js
// (Remove this line if running in the browser)
import fetch from 'node-fetch';

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

async function updateUser() {
  try {
    // 👇️ const response: Response
    const response = await fetch('https://www.jiyik.com/api/users/2', {
      method: 'PATCH',
      body: JSON.stringify({
        name: 'John Smith',
        job: 'manager',
      }),
      headers: {
        'Content-Type': 'application/json',
        Accept: 'application/json',
      },
    });

    if (!response.ok) {
      throw new Error(`Error! status: ${response.status}`);
    }

    // 👇️ const result: UpdateUserResponse
    const result = (await response.json()) as UpdateUserResponse;

    console.log('result is: ', JSON.stringify(result, null, 4));

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

updateUser();

这次我们在选项对象中将方法属性设置为 PATCH。

我们仍然需要将请求正文转换为 json，将其传递给 JSON.stringify() 方法。

请注意，我们将 Content-Type 标头设置为 application/json ，就像我们在发出 POST 请求时所做的那样。

最后一步是使用类型断言将结果变量的类型设置为预期的响应类型。

在 TypeScript 中发出 Http PUT 请求

为了完整起见，让我们看一个使用 TypeScript 中的 fetch 发出的 HTTP PUT 请求示例。

// 👇️ only necessary if running in Node.js
// (Remove this line if running in the browser)
import fetch from 'node-fetch';

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

async function updateUser() {
  try {
    // 👇️ const response: Response
    const response = await fetch('https://www.jiyik.com/api/users/2', {
      method: 'PUT',
      body: JSON.stringify({
        name: 'John Smith',
        job: 'manager',
      }),
      headers: {
        'Content-Type': 'application/json',
        Accept: 'application/json',
      },
    });

    if (!response.ok) {
      throw new Error(`Error! status: ${response.status}`);
    }

    // 👇️ const result: UpdateUserResponse
    const result = (await response.json()) as UpdateUserResponse;

    console.log('result is: ', JSON.stringify(result, null, 4));

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

updateUser();

代码片段中唯一改变的是 - 我们将选项对象中的方法属性设置为 PUT 而不是 PATCH。

在 TypeScript 中发出 Http DELETE 请求

让我们看一个使用 TypeScript 中的 fetch 发出的 HTTP DELETE 请求示例。

// 👇️ only necessary if running in Node.js
// (Remove this line if running in the browser)
import fetch from 'node-fetch';

async function deleteUser() {
  try {
    // 👇️ const response: Response
    const response = await fetch('https://www.jiyik.com/api/users/2', {
      method: 'DELETE',
      headers: {
        Accept: 'application/json',
      },
    });

    if (!response.ok) {
      throw new Error(`Error! status: ${response.status}`);
    }

    console.log('User deleted successfully');

    return 'user deleted successfully';
  } catch (error) {
    if (error instanceof Error) {
      console.log('error message: ', error.message);
      return error.message;
    } else {
      console.log('unexpected error: ', error);
      return 'An unexpected error occurred';
    }
  }
}

deleteUser();

我们将方法属性设置为 DELETE 并删除了正文和 Content-Type 标头，因为我们没有发送带有 DELETE 请求的请求正文。

我在示例中使用的 API 发送一个空响应，状态码为 204 - “No Content”。

请注意，我们不应尝试通过调用 json() 方法来解析空响应，因为您将收到错误消息：“JSON Unexpected end of JSON input”，因为我们尝试解析的响应没有响应正文。

上一篇：在 TypeScript 中初始化和键入Map

下一篇：TypeScript 中使用 getter 和 setter

转载请发邮件至 1244347461@qq.com 进行申请，经作者同意之后，转载请以链接形式注明出处

本文地址：

相关文章

在 TypeScript 中返回一个 Promise

发布时间：2023/03/19 浏览次数：182 分类：TypeScript

本教程讨论如何在 TypeScript 中返回正确的 Promise。这将提供 TypeScript 中 Returns Promise 的完整编码示例，并完整演示每个步骤。

扫一扫阅读全部技术教程

社交账号
  • https://www.github.com/onmpw
  • qq:1244347461

最新推荐

教程更新

热门标签

Mongodb Mysql C C语言 HTML Python Django 操作系统 Linux Matplotlib Java css Go Golang Matlab Docker Angular Javascript git C++ Cpp Vue PHP Nginx
扫码一下
查看教程更方便