vue3-HTTP请求方式

下面是关于Vue3中HTTP请求方式的详细讲解：

1. 介绍

在Vue3中，可以使用多种方式来进行HTTP请求。其中，Vue3推荐使用axios库来进行HTTP请求。

2. 安装axios

在使用axios之前，需要先安装axios库。可以使用以下命令进行安装：

npm install axios

3. 发送HTTP请求

3.1 GET请求

在Vue3中，可以使用以下方式来发送GET请求：

import axios from 'axios';

axios.get('http://localhost:3000/users')
  .then(response => {
    console.log(response.data);
  })
  .catch(error => {
    console.log(error);
  });

上面的代码中，我们使用axios.get()发送了一条GET请求，请求的URL是http://localhost:3000/users。如果请求成功，会通过.then()方法返回一个响应对象，并且可以通过response.data属性获取返回的数据。如果请求失败，会通过.catch()方法捕获错误，并输出错误信息。

3.2 POST请求

在Vue3中，可以使用以下方式来发送POST请求：

import axios from 'axios';

axios.post('http://localhost:3000/users', {
    firstName: 'John',
    lastName: 'Doe'
  })
  .then(response => {
    console.log(response.data);
  })
  .catch(error => {
    console.log(error);
  });

上面的代码中，我们使用axios.post()发送了一条POST请求，请求的URL是http://localhost:3000/users。在请求的同时，我们还传递了一个包含firstName和lastName属性的数据对象。如果请求成功，会通过.then()方法返回一个响应对象，并且可以通过response.data属性获取返回的数据。如果请求失败，会通过.catch()方法捕获错误，并输出错误信息。

4. 可配置的axios实例

如果需要对axios进行一些特殊的配置或者自定义一些请求拦截器和响应拦截器，可以通过创建一个可配置的axios实例来完成。

import axios from 'axios';

const api = axios.create({
  baseURL: 'http://localhost:3000',
  timeout: 5000
});

api.interceptors.request.use(config => {
  // 对请求进行处理
  return config;
}, error => {
  return Promise.reject(error);
});

api.interceptors.response.use(response => {
  // 对响应进行处理
  return response;
}, error => {
  return Promise.reject(error);
});

api.get('/users')
  .then(response => {
    console.log(response.data);
  })
  .catch(error => {
    console.log(error);
  });

上面的代码中，我们通过axios.create()方法创建了一个名为api的可配置的axios实例。在创建实例的同时，我们指定了基础URL和请求超时时间。接着，通过api.interceptors.request.use()方法和api.interceptors.response.use()方法分别指定了请求拦截器和响应拦截器。最后，我们使用api.get()方法发送了一条GET请求，请求的URL是/users。如果请求成功，会通过.then()方法返回一个响应对象，并且可以通过response.data属性获取返回的数据。如果请求失败，会通过.catch()方法捕获错误，并输出错误信息。