但是当我在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;
给出了它为空的错误。
答案 0 :(得分:1)
您只需要分配变量...例如:
let response = {} as AxiosResponse;
答案 1 :(得分:0)
您正在尝试访问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
}
这里,我们使用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
}
例如,如果您知道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) );
因此可以执行上述操作,在此我们将工作映射到他们的薪水。