【Vue3深度解析】Axios网络请求配置全攻略

引言

在Vue3项目中，Axios是一个强大的HTTP客户端，可以用于发送异步请求，如GET、POST、PUT、DELETE等。它基于Promise设计，使得异步请求的代码更易于理解和维护。本文将深度解析Axios在Vue3中的应用，包括基本使用、最佳实践以及与Vue3的整合。

安装Axios

首先，确保你的Vue3项目中已经安装了Axios。可以通过npm或yarn进行安装：

npm install axios
# 或者
yarn add axios

Axios的基本使用

发起HTTP请求

Axios支持多种HTTP方法，以下是一个简单的GET请求示例：

import axios from 'axios';

axios.get('/api/user?ID12345')
  .then(function (response) {
    console.log(response);
  })
  .catch(function (error) {
    console.log(error);
  });

发起POST请求

对于POST请求，你需要传递一个配置对象，其中包含了请求的URL、数据以及响应类型等：

axios.post('/api/user', {
  firstName: 'John',
  lastName: 'Doe'
})
.then(function (response) {
  console.log(response);
})
.catch(function (error) {
  console.log(error);
});

Axios配置

全局配置

你可以在Axios实例上设置全局的配置，例如基础URL、请求超时时间等：

axios.defaults.baseURL = 'https://api.example.com';
axios.defaults.timeout = 1000;

配置Axios实例

你可以创建一个Axios实例并设置自定义的配置：

const apiClient = axios.create({
  baseURL: 'https://api.example.com',
  timeout: 1000
});

Axios拦截器

拦截器可以在请求或响应被处理之前拦截它们。Axios提供了请求拦截器和响应拦截器。

请求拦截器

请求拦截器可以用来添加请求头、验证token等：

axios.interceptors.request.use(
  config => {
    // 添加请求头
    config.headers['Authorization'] = 'Bearer ' + localStorage.getItem('token');
    return config;
  },
  error => {
    return Promise.reject(error);
  }
);

响应拦截器

响应拦截器可以用来处理响应数据、处理错误等：

axios.interceptors.response.use(
  response => {
    // 对响应数据做点什么
    return response.data;
  },
  error => {
    // 对响应错误做点什么
    return Promise.reject(error);
  }
);

与Vue3的整合

在Vue3中，你可以通过在组件中使用setup函数来发送网络请求：

import { ref, onMounted } from 'vue';
import axios from 'axios';

export default {
  setup() {
    const user = ref(null);

    onMounted(async () => {
      try {
        const response = await axios.get('https://api.example.com/user');
        user.value = response.data;
      } catch (error) {
        console.error(error);
      }
    });

    return {
      user
    };
  }
};

最佳实践

使用Axios实例来发送请求，而不是直接使用axios。
使用拦截器来处理全局的请求和响应逻辑。
在请求中添加必要的请求头，如Authorization。
在响应中处理错误，并在组件中显示错误信息。

通过以上步骤，你可以在Vue3项目中高效地使用Axios进行网络请求。

引言