数据请求

const { data, error } = useRequest(service, options);

这是 VueRequest 最基本的 API。这里的 service 可以表示为一个请求接口,它可以是一个 字符串、一个 对象 或者是一个 函数。当请求完成后,则将会根据请求结果来修改 dataerror

函数 推荐

查询函数实际上可以是任意一个返回 Promise 的函数,返回的 promise 将决定是传递 data 亦或者是抛出错误,错误将会被 error 捕获。函数的入参将会被当做 params 传递给 API 接口

换句话说,你可以使用 第三方的请求库(如 axios 来获取数据,然后将该请求传给 VueRequest 来进行管理。

我们来举个例子 🌰

import { useRequest } from 'vue-request';
import axios from 'axios';

const getUser = userName => {
  return axios.get('api/user', {
    params: {
      name: userName,
    },
  });
};

const { data, run } = useRequest(getUser, {
  defaultParams: ['马冬梅'],
});

// ...
run('张三');

顺带一提,你也可以通过函数返回一个 字符串 或者是一个 对象,我们将会使用 fetch 来处理这些数据请求。

import { useRequest } from 'vue-request';

const { data } = useRequest(name => 'api/user?name=' + name);

字符串

当然,如果你的接口足够简单,你也可以通过传入一个接口的链接

import { useRequest } from 'vue-request';

const { data } = useRequest('api/simple');

对象

当然,如果你的接口足够简单,你也可以通过传入一个包含 url 属性的对象

import { useRequest } from 'vue-request';

const objectService = {
  url: 'api/simple',
  method: 'POST',
  headers: new Headers({
    'Content-Type': 'application/json',
  }),
};

const { data } = useRequest(objectService);

恭喜你,你已经入门了 VueRequest 了。

什么?还不够用?来来来,后面的章节我们来了解一下一些常用的配置与用法。

上次更新: 6/6/2023, 4:05:10 AM
贡献者: John