---

Vue3是一款现代的JavaScript框架，支持组件化开发，其优良特性与Vue2相比更加完善。在Vue3中，我们可以通过Axios库来处理Ajax请求。Axios是一个流行的JavaScript库，它使用Promise API管理HTTP请求，提供了一种简单的方式来进行异步请求和相应的数据处理。本篇文档将详细介绍如何在Vue3项目中使用Axios库进行Ajax请求。

1. 安装Axios

npm install axios

2. 引入Axios

在需要进行Ajax请求的Vue模块中引入Axios库。

import axios from 'axios'

3. 发送GET请求

使用Axios发送GET请求的示例:

axios.get('/api/list')
    .then(response => console.log(response.data))
    .catch(error => console.log(error));

4. 发送POST请求

使用Axios发送POST请求的示例:

axios.post('/api/login', {
        username: 'xiaoming',
        password: '123456'
    })
    .then(response => console.log(response.data))
    .catch(error => console.log(error));

5. 处理请求参数

当发送Ajax请求时，可能需要设置一些请求参数。根据Axios文档，这可以通过一个配置对象来实现。例如，可以设置请求头，超时时间，响应类型等。

axios.get('/api/list', {
    headers: {
        'Authorization': 'Bearer TOKEN'
    },
    timeout: 1000,
    responseType: 'json'
})
.then(response => console.log(response.data))
.catch(error => console.log(error));

6. 处理响应结果

Axios返回的结果是一个Promise对象，可以使用 then 和 catch 方法来处理请求结果。Response对象包含请求的头信息，状态码以及响应数据 (response.data)。

axios.get('/api/list')
.then(response => {
    console.log(response.headers);
    console.log(response.status);
    console.log(response.data);
})
.catch(error => console.log(error));

7. 错误处理

在请求时，可能会出现一些错误，例如网络错误、404等。Axios提供了.catch()方法来处理这些错误。

axios.get('/api/list')
    .then(response => console.log(response.data))
    .catch(error => console.log(error.response))
    .finally(() => console.log('请求完成'));

8. Axios拦截器

可以使用Axios拦截器来处理请求和响应数据。Axios拦截器允许在请求或响应被发送前/后拦截数据，可以做一些额外的处理。

axios.interceptors.request.use(config => {
    // 在发送请求之前做些什么
    config.headers.token = localStorage.getItem('token');
    return config;
}, error => {
    // 处理请求错误
    return Promise.reject(error);
});

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

以上就是在Vue3项目中使用Axios库进行Ajax请求的详细说明。通过Axios，我们可以轻松处理Ajax请求，获取数据，并且支持链式操作，灵活度很高。在实际开发中，我们可以结合Vue3的生命周期，来优化Axios的请求和响应结果的处理。