如何在 TypeScript 中发出 Http 请求

在 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”,因为我们尝试解析的响应没有响应正文。