如何在 TypeScript 中保存来自 GET 响应的数据并访问它们？

Question

我目前正在开发一个项目管理应用程序，我想动态显示来自 GET 请求的数据，但是我不知道该怎么做，这就是我的原因可以使用一些帮助，更有经验的人的见解。我想弄清楚如何存储然后从 GET 响应访问数据。

我的脚本：

export default {
setup() {

type Project = {
  title: string;
  author: string;
  description: string;
};

type GetProjectResponse = {
  data: Project[];
};



async function getProject() {
  try {
    const response = await fetch(
      'https://sill-api-app.herokuapp.com/api/project/622b1a17a900330b46af2203',
      {
        method: 'GET',
        headers: {
          Accept: 'application/json',
        },
      }
    );

    if (!response.ok) {
      throw new Error(`Error! status: ${response.status}`);
    }
    const result = (await response.json()) as GetProjectResponse;
    console.log(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';
    }
  }
}

void getProject();

console.log();

return {
  getProject,
};
},

name: 'singleProject',
};

该项目是在 Quasar(VueJS) 中完成的，我使用的是 typescript。此代码片段是我的视图的脚本部分。

Answer 1

你需要像这样的 fetch 函数包装：

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


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

如何在 TypeScript 中保存来自 GET 响应的数据并访问它们？

How could I save data from GET response in TypeScript and access them?

typescript

vue.js

quasar