如何在打字稿中使用获取

Question

我正在使用 window> window.fetch..fetch 在Typescript中直接进入我的自定义类型：

我通过将承诺结果扔到中间的“任何”变量来解决这一问题。

做到这一点的正确方法是什么？

import { Actor } from './models/actor';

fetch(`http://swapi.co/api/people/1/`)
      .then(res => res.json())
      .then(res => {
          // this is not allowed
          // let a:Actor = <Actor>res;

          // I use an intermediate variable a to get around this...
          let a:any = res; 
          let b:Actor = <Actor>a;
      })

Answer 1

不幸的是

，不幸的是， fet> fetch 也不是响应它返回接受通用输入，因此我们需要进行某种类型的铸造（将其视为为t 以下）。

但是，通常会在您自己的项目中获取以提供任何通用标题，基本URL等，以便您可以在应用程序中允许通用输入。

包装摘要的示例，并允许应用程序定义每个API响应的形状。

const BASE_URL = 'http://example.org';

//         Input T ↴   is thread through to ↴
async function api<T>(path: string): Promise<T> {
    const response = await fetch(`${BASE_URL}/${path}`);

    if (!response.ok) {
      throw new Error(response.statusText);
    }

    //    And can also be used here ↴
    return await response.json() as T;
}

// Set up various fetches
async function getConfig() {
  //             Passed to T ↴
  return await api<{ version: number }>('config');
}

// Elsewhere
async function main() {
  const config = await getConfig();

  // At this point we can confidently say config has a .version
  // of type number because we threaded the shape of config into 
  // api() 
  console.log(config.version); 
}

Playground

Previous versions

Note ：以前的版本在撰写本文时使用了承诺，在浏览器中通常会发现/异步。从学习的角度来看，它们仍然很有用，因此保留它们。

承诺版本

自一段时间以来编写此答案以来发生了一些更改。如评论中所述， wenders.json＆lt; t＆gt; 不再有效。不确定，找不到将其删除的地方。

对于以后的发行版，您可以执行：

// Standard variation
function api<T>(url: string): Promise<T> {
  return fetch(url)
    .then(response => {
      if (!response.ok) {
        throw new Error(response.statusText)
      }
      return response.json() as Promise<T>
    })
}


// For the "unwrapping" variation

function api<T>(url: string): Promise<T> {
  return fetch(url)
    .then(response => {
      if (!response.ok) {
        throw new Error(response.statusText)
      }
      return response.json() as Promise<{ data: T }>
    })
    .then(data => {
        return data.data
    })
}

旧答案

以下几个示例，从基本到请求和/或错误处理后添加转换：

基本：

// Implementation code where T is the returned data shape
function api<T>(url: string): Promise<T> {
  return fetch(url)
    .then(response => {
      if (!response.ok) {
        throw new Error(response.statusText)
      }
      return response.json<T>()
    })

}

// Consumer
api<{ title: string; message: string }>('v1/posts/1')
  .then(({ title, message }) => {
    console.log(title, message)
  })
  .catch(error => {
    /* show error message */
  })

数据转换：

通常您可能需要对数据进行一些调整，然后例如，对于消费者而言，取消顶级数据属性。这是直接的：

function api<T>(url: string): Promise<T> {
  return fetch(url)
    .then(response => {
      if (!response.ok) {
        throw new Error(response.statusText)
      }
      return response.json<{ data: T }>()
    })
    .then(data => { /* <-- data inferred as { data: T }*/
      return data.data
    })
}

// Consumer - consumer remains the same
api<{ title: string; message: string }>('v1/posts/1')
  .then(({ title, message }) => {
    console.log(title, message)
  })
  .catch(error => {
    /* show error message */
  })

错误处理：

我认为您不应该直接在此服务中直接捕获错误，而只是允许它起泡，但是如果需要，您可以执行以下操作：

function api<T>(url: string): Promise<T> {
  return fetch(url)
    .then(response => {
      if (!response.ok) {
        throw new Error(response.statusText)
      }
      return response.json<{ data: T }>()
    })
    .then(data => {
      return data.data
    })
    .catch((error: Error) => {
      externalErrorLogging.error(error) /* <-- made up logging service */
      throw error /* <-- rethrow the error so consumer can still catch it */
    })
}

// Consumer - consumer remains the same
api<{ title: string; message: string }>('v1/posts/1')
  .then(({ title, message }) => {
    console.log(title, message)
  })
  .catch(error => {
    /* show error message */
  })

Answer 2

实际上，只要传递的类型兼容，就几乎在打字稿中的任何地方，都将值传递给具有指定类型的函数。

话虽如此，以下工作...

 fetch(`http://swapi.co/api/people/1/`)
      .then(res => res.json())
      .then((res: Actor) => {
          // res is now an Actor
      });

我想将所有HTTP调用包装在可重复使用的类中 - 这意味着我需要某种方法让客户以所需的形式处理响应。为了支持这一点，我接受回调lambda作为我的包装方法的参数。 Lambda声明接受此处所示的任何类型...

callBack: (response: any) => void

但是在使用中，呼叫者可以通过指定所需返回类型的lambda。我像这样修改了上面的代码...

fetch(`http://swapi.co/api/people/1/`)
  .then(res => res.json())
  .then(res => {
      if (callback) {
        callback(res);    // Client receives the response as desired type.  
      }
  });

以便客户可以用像...的回调调用它。

(response: IApigeeResponse) => {
    // Process response as an IApigeeResponse
}

Answer 3

如果您看一下您将看到身体的定义

export class Body {
    bodyUsed: boolean;
    body: NodeJS.ReadableStream;
    json(): Promise<any>;
    json<T>(): Promise<T>;
    text(): Promise<string>;
    buffer(): Promise<Buffer>;
}

，这意味着您可以使用仿制药来实现所需的目标。我没有测试此代码，但看起来像这样：

import { Actor } from './models/actor';

fetch(`http://swapi.co/api/people/1/`)
      .then(res => res.json<Actor>())
      .then(res => {
          let b:Actor = res;
      });

Answer 4

这是专门为发布请求而编写的。这就是为什么它具有“变量”参数。如果“获取”请求相同的代码将起作用，则可以选择可选

export type FetcherOptions = {
  queryString: string
  variables?: FetcherVariables
}

export type FetcherVariables = {[key: string]: string | any | undefined}

export type FetcherResults<T> = {
  data: T
}

const fetcher = async <T>({queryString, 
                           variables }: FetcherOptions): Promise<FetcherResults<T>> => {
  const res = await fetch(API_URL!, {
    method: "POST",
    headers: {
      "Content-Type": "application/json",
      // You can add more headers
    },
    body: JSON.stringify({
      queryString,
      variables
    })
  })
  const { data, errors} = await res.json()

  if (errors) {
    // if errors.message null or undefined returns the custom error
    throw new Error(errors.message ?? "Custom Error" )
  }

  return { data }
}

Answer 5

对于此特定的用例：

“从远程资源获取数据，我们没有控制权，并且想要在当前应用程序中注入过滤器

”
https://www.npmjs.com/package/package/zod

以下时尚：

// 1. Define a schema

const Data = z.object({
  // subset of real full type
  name: z.string(),
  // unExpectedAttr: z.number(), --> enabling this will throw ZodError 
  height: z.string(),
  mass: z.string(),
  films: z.array(z.string()),
});

// 2. Infer a type from the schema to annotate the final obj

type DataType = z.infer<typeof Data>;

(async () => {
  try {
    const r = await fetch(`https://swapi.dev/api/people/1/?format=json`);
    const obj: DataType = Data.parse(await r.json());
    console.log(obj); // filtered with expected field in Data Schema
    /**
     Will log:
     {
       name: 'Luke Skywalker',
       height: '172',
       mass: '77',
       films: [
        'https://swapi.dev/api/films/1/',
        'https://swapi.dev/api/films/2/',
        'https://swapi.dev/api/films/3/',
        'https://swapi.dev/api/films/6/'
       ]
     }
    */

  } catch (error) {
    if (error instanceof ZodError) {
      // Unexpected type in response not matching Data Schema
    } else {
      // general unexpected error
    }
  }
})();

Answer 6

新解决方案（2024-12）

当我自己在工作中面临问题时，我对这个话题感兴趣的 。最受欢迎的答案对我来说是一个很大的否定，因为：

1. 它仅键入快乐路径： wenders.ok 是 true 在
2. 非OK响应上丢弃错误，该错误会促进“遵循快乐的道路”代码气味

另外，为什么如果（response.ok）提出错误？这迫使您在某处添加 try..catch 。只需测试状态代码或 ok 值即可。投掷是一种可怕的练习。

无论如何，我需要键入所有可能的身体：例如，我的API在400个不良请求响应中返回一个有意义的身体。

没有什么可以解决 n-types-for-n-status-codes 问题，所以我做了自己的：npm软件包 dr-fetch 通过使用链语法累积类型来解决此问题。

首先，创建Fetcher对象，该对象允许自定义的身体解析器和自定义的数据提取功能。前者是用 content-type 的响应来处理不常见的响应；后者是进行前/提取工作：

// myFetch.ts
import { obtainToken } from './magical-auth-stuff.js';
import { setHeaders } from 'dr-fetch';

export function myFetch(url: Parameters<typeof fetch>[0], init?: Parameters<typeof fetch>[1]) {
    const token = obtainToken();
    init ??= {};
    setHeaders(init, { 'Accept': 'application/json', 'Authorization': `Bearer ${token}`});
    return fetch(url, init);
}

// fetcher.ts
import { DrFetch } from "dr-fetch";
import { myFetch } from "./myFetch.js";

export default new DrFetch(myFetch);
// If you don't need a custom fetch function, just do:
export default new DrFetch();

现在我们在需要的地方导入此fetcher对象，为URL键入并获取：

import fetcher from './fetcher.js';
import type { ServerErrorStatusCode } from 'dr-fetch';

const response = await fetcher
    .for<200, MySuccessType>()
    .for<400, MyBadRequestType>()
    .for<500, MyServerErrorType>()
    // OR, with a helper type to cover more status codes at once:
    .for<ServerErrorStatusCode, MyServerErrorType>()
    .post('the/url', { my: body })
    ;

// At this point, TypeScript can type-narrow 'response.body' using 
// 'response.status' or 'response.ok':
if (response.status === 501) {
    // response.body is of type MyServerErrorType
}
else if (response.status === 200) {
    // response.body is of type MySuccessType
}

看到吗？这是非常清楚，简洁的代码，不需要 try..catch 非OK响应。停止疯狂：拒绝进行非OK回应。