nuxt3 使用$fetch封装（typescript）客户端使用的http请求方法

本文主要是介绍nuxt3 使用$fetch封装（typescript）客户端使用的http请求方法，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

nuxt3提供了usefetch()之类的方法来发起请求，他提供的这些方法貌似都是考虑和server端配合使用的，比如说在页面初始化前，有些数据是由后端提供，但是为了按SSR来渲染页面，就可以使用usefetch()来配合server先从后端获取数据，再渲染页面。所以我看文档，都是使用await等待，和之前我接触的异步请求非常不同。

而我想要的做的是由客户端直接向后端发起http请求的方法，usefetch()好像也可以设置只由客户端发起请求来使用，但是却没法由我自己来预处理后端返回的数据。

场景

后端返回的数据，有可能是json，也有可能是blob。这得由请求头"content-type"来确定。所以，需要对响应做预处理。研究了一圈，以前使用的axios貌似被nuxt3抛弃了，nuxt3支持的是fetch，那就用它自带的工具，也就不用再引入第三方库了。

let baseUrl = "http://127.0.0.1/";
// 指定后端返回的基本数据类型
export interface IResponse<T> {data?: T;code: number;headers: Headers;
}
function fetch<T>(url: string, options?: any): Promise<IResponse<T>> {return $fetch<IResponse<T>>(url, {...options,baseURL: baseUrl,onResponse({ response }) {// fetch 是会自动解析数据的，进入onResponse前就已经解析过了，它会智能地解析 JSON 和本机值，如果解析失败，则返回到文本，解析的结果就是response._datalet contentType = response.headers.get("content-type");// 请求码不为200等正常码的情况if (!response.ok) {// 这里的_data，会被后面catch捕获，因为你可能还需要获取headers等数据，所以需要在这里处理一下数据response._data = { code: -1, data: "请求已到达服务器但未正常响应：" + response.statusText, headers: response.headers };return;}// 我的后端只由json和blob两种类型，如果你的不止，那么就自己根据实际情况修改if (!contentType) {// 如果没有content-type，则认为返回的数据不符合预期response._data = { code: -1, data: "返回数据不符合预期" };return;} else if (contentType == "application/json; charset=utf-8") {//给数据再添加headersresponse._data.headers = response.headers; return;} else {// 后端返回的文件流，会包含该请求头const disposition = response.headers.get("content-disposition");if (!disposition) {response._data = { code: -1, data: "返回数据不符合预期" };return;}// 切割出文件名，后端返回格式不同处理就不同const blob = new Blob([response._data], { type: contentType });// 创建ObjectURL，返回给前端const blobUrl = window.URL.createObjectURL(blob);response._data = { code: 1, data: blobUrl, headers: response.headers };return;}},onRequestError({ error }) {// 请求失败的回调，这里的失败是指那种网络不通的之类请求都没到后端的情况，而不是后端返回码不是200之类的情况// 后端返回错误码的情况归onResponse管，这里只处理请求不通的情况},}).catch((error) => {// 请求不为200等正常码的情况，这里会捕获到，并返回给前端return error.data;});
}
// 此处的url，无需包含baseUrl
export function get<T>(url: string, params?: any) {return fetch<T>(url, { method: "get", ...params });
}export function post<T>(url: string, params?: any) {return fetch<T>(url, { method: "post", ...params });
}