nuxt3如何发送post请求?

ppylox
·4/26/2023·0 阅读
AI 摘要模型根据正文自动生成,仅供参考

Nuxt3 中使用 useFetch 发送 POST 请求时,参数键为 body 而非 axios 常用的 data。useFetch 的 options 支持 method、query、params、body、headers、baseURL 等字段,返回 AsyncData 对象,含 data、pending、refresh、execute、error。示例:useFetch(url, { method: "post", body: { postId } })。

大家好我是图恩,最近在给网站添加评论功能的时候又忘记了在nuxt3项目中如何发送post请求了,官网默认的请求demo都是get方式,当我找到有post请求的demo的时候,在参数这个地方又犯了难,因为我按照一般情况下axios的请求参数时data尝试发现对应不上。

历尽一番挫折后终于在ts的类型定义中找到了完整的参数如下:

function useFetch(\n  url: string | Request | Ref<string | Request> | () => string | Request,\n  options?: UseFetchOptions<DataT>\n): Promise<AsyncData<DataT>>\n\ntype UseFetchOptions = {\n  key?: string\n  method?: string\n  query?: SearchParams\n  params?: SearchParams\n  body?: RequestInit['body'] | Record<string, any>\n  headers?: Record<string, string> | [key: string, value: string][] | Headers\n  baseURL?: string\n  server?: boolean\n  lazy?: boolean\n  immediate?: boolean\n  default?: () => DataT\n  transform?: (input: DataT) => DataT\n  pick?: string[]\n  watch?: WatchSource[]\n}\n\ntype AsyncData<DataT> = {\n  data: Ref<DataT>\n  pending: Ref<boolean>\n  refresh: (opts?: { dedupe?: boolean }) => Promise<void>\n  execute: () => Promise<void>\n  error: Ref<Error | boolean>\n}

出乎意料的是post请求的key是body,以下为一个正常的post请求供参考:

const getCommentList = async () => {\n  let { data } = await useFetch("/dsiab.com/getList", { method: "post", body: { postId: state.form.postId } })\n}

大家如果也在使用nuxt3开发项目的话要特别注意这个地方。

相关文章

评论 (0)

暂无评论,来写第一条吧