Data Fetching

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

This is the very fundamental API of VueRequest. The service here can be expressed as a request, it can be a String, Object or Request Functions. When we get a response, it sets data and error based on the result of request.

Request Functions Recommend

A request function can be literally any function that returns a promise. The promise that is returned should either resolve the data or throw an error. The input parameters of the function will be passed to the request as params

In other words, you can use third-party request library (such as axios) to get data and then pass the request to VueRequest for management. For details, please refer to the following example.

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: ['attojs'],
});

// ...
run('vue-request');

By the way, you can also return a string or an object through a function, and we will use fetch to process these data requests.

import { useRequest } from 'vue-request';

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

String

Of course, if your request is simple enough, you can pass in a URL.

import { useRequest } from 'vue-request';

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

Object

Of course, if your request is simple enough, you can pass in an object containing the url attribute.

import { useRequest } from 'vue-request';

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

const { data } = useRequest(objectService);

---

Next, let's take a look at some other configurations.