创建帮助程序类时

Question

我有一个后端，它返回这样的json响应：

但是当我在vue nuxt项目中使用axios时，我得到了axios的json响应。就像axios：{状态，数据...}。

我不知道axios这样做了，但是我想保留我的后端响应。因此，我制作了一个仅返回axios.data的帮助程序文件。我还分配了一些普通的东西，所以我不必每次都声明它们。

具有我所有请求的服务文件：

const getAllJobs = () => request({ url: url.default, method: 'GET', });

还有我使用const的vue文件：

getAllJobs().then((res: any) => console.log(res));

我真的不明白为什么说变量在分配之前就被使用了。我试过了，但是也没用：let response: AxiosResponse | null = null;给出了它为空的错误。

Answer 1

您只需要分配变量...例如：

let response = {} as AxiosResponse;

Answer 2

问题

您正在尝试访问response的属性，但是该响应实际上并不存在，因为您从未在任何地方进行设置。您可以通过弄乱类型来抑制错误，但是如果您实际上没有设置响应，则此功能毫无意义。您需要调用axios.get或axios.request（可以处理“ GET”和“ POST”）才能真正获得响应。

基本解决方案

import axios, {AxiosRequestConfig} from "axios";

const request = async (options: AxiosRequestConfig) => {

  if (! options.headers) options.headers = {}; // not actually necessary

  const response = await axios.request(options); // has type AxiosResponse<any>
  
  return response.data; // has type any
}

Typescript Playground Link

这里，我们使用axios.request来基于options获取数据。由于这是一个async函数，因此我们需要await它的响应，而我们的request函数必须是async。您可以阅读异步/等待，这是用于处理诺言的更现代的语法。但是您仍然可以在vue文件中使用.then()，因为异步功能本质上是幕后承诺。

高级解决方案

从打字稿的角度来看，可以对我们的request函数进行一些改进。 url实际上是接口AxiosRequestConfig上的可选属性，但是我们可能需要使用它。因此，您可以使用(options: AxiosRequestConfig & {url: string})。您可能还需要其他属性。

返回的request类型为any，因为axios不知道它将要获取哪种数据类型。如果您知道，则可以使用通用的打字稿来指定返回的数据类型。否则，如果响应中有data: any，则可以编写data as MyType来声明data的类型。

const request = async <T>(options: AxiosRequestConfig & {url: string}): Promise<T> => {

  const response = await axios.request<T>(options); // has type AxiosResponse<T>
  
  return response.data; // has type T
}

Typescript Playground Link

例如，如果您知道getAllJobs返回了接口Job的数组，则可以调用request<Job[]>(..)，返回的类型将是Job[]。

interface Job {
  title: string;
  salary: number;
}

const getAllJobs = () => request<Job[]>({ url: 'somestring', method: 'GET', });

getAllJobs().then((jobs /* has type Job[] */) => jobs.map( job => job.salary) );

因此可以执行上述操作，在此我们将工作映射到他们的薪水。