如何在 TypeScript 中发出 Http 请求

作者

目录

How to Make Http requests in TypeScript

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

在 TypeScript 中发出 Http GET 请求

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

如果你想使用该axios包在 TypeScript 中发出 Http 请求，请查看我的另一篇文章 –
Making Http requests with Axios in TypeScript，因为本文使用内置fetch方法。

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

请注意，只有node-fetch在 Node.js 中运行代码时才需要安装和导入，这fetch是浏览器中的内置方法。

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

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

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

索引.ts
// 👇️ 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://reqres.in/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属性包含一个布尔值，
表示响应是否成功。

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

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

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

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

在 TypeScript 中发出 Http POST 请求

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

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

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

索引.ts
// 👇️ 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://reqres.in/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-Typehttp 头来通知服务器POST请求中的数据是一个 JSON 字符串。

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

在 TypeScript 中发出 Http PATCH 请求

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

索引.ts
// 👇️ 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://reqres.in/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();

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

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

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

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

在 TypeScript 中发出 Http PUT 请求

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

索引.ts
// 👇️ 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://reqres.in/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();

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

在 TypeScript 中发出 Http DELETE 请求

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

索引.ts
// 👇️ 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://reqres.in/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();

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

我在示例中使用的 API 发送状态代码为“无内容”的空响应。 204

请注意，您不应尝试通过调用该json()
方法来解析空响应，因为您会收到错误消息：“JSON 输入的意外结束” ，因为您尝试解析的响应没有响应主体。

–

发表评论