Vue3 axios数据请求封装

**Vue3 Axios 数据请求封装**

在 Vue3 中，Axios 是一个非常流行的 HTTP 请求库。然而，直接使用 Axios 的话，我们需要每次都手动创建一个实例，并且需要传递配置参数，这样会导致代码冗余和难以维护。

因此，在本文中，我们将学习如何封装 Axios，实现更高效、易于维护的数据请求功能。

### **1. 创建 axios 实例**

首先，我们需要创建一个 Axios 的实例。我们可以在 `main.js` 文件中创建一个全局的 Axios 实例。

javascriptimport axios from 'axios';

const instance = axios.create({
 // 基础 URL baseURL: process.env.VUE_APP_API_URL,
 // 请求头 headers: {
 'Content-Type': 'application/json',
 },
 // 超时时间（毫秒）
 timeout:10000,
});

在上面的代码中，我们创建了一个 Axios 实例，并设置了基础 URL、请求头和超时时间。

### **2. 封装 axios 请求函数**

接下来，我们需要封装一些常用的 axios 请求函数。例如，`get()`, `post()`, `put()` 和 `delete()` 等。

javascript// get 请求export function get(url, params = {}) {
 return instance.get(url, { params });
}

// post 请求export function post(url, data = {}, config = {}) {
 return instance.post(url, data, config);
}

// put 请求export function put(url, data = {}, config = {}) {
 return instance.put(url, data, config);
}

// delete 请求export function del(url, params = {}) {
 return instance.delete(url, { params });
}

在上面的代码中，我们封装了四个常用的 axios 请求函数：`get()`, `post()`, `put()` 和 `delete()`。

### **3. 使用封装的 axios 请求函数**

最后，我们可以使用这些封装好的 axios 请求函数来发起请求。

javascript// get 请求示例import { get } from './axios';

const res = await get('/api/data');
console.log(res.data);

// post 请求示例import { post } from './axios';

const data = { name: 'John', age:30 };
const res = await post('/api/create', data);
console.log(res.data);

在上面的代码中，我们使用了封装好的 axios 请求函数来发起请求。

### **4. 错误处理**

最后，我们需要处理错误。我们可以在 `axios` 实例中设置一个错误拦截器。

javascriptinstance.interceptors.push({
 responseError: (error) => {
 // 处理错误 console.error(error);
 return Promise.reject(error);
 },
});

在上面的代码中，我们设置了一个错误拦截器，用于处理 axios 请求时的错误。

### **5. 总结**

通过本文的学习，我们可以实现 Vue3 Axios 数据请求封装。我们可以使用封装好的 axios 请求函数来发起请求，并且可以轻松地处理错误。

**完整代码示例**

javascript// main.jsimport axios from 'axios';

const instance = axios.create({
 baseURL: process.env.VUE_APP_API_URL,
 headers: {
 'Content-Type': 'application/json',
 },
 timeout:10000,
});

instance.interceptors.push({
 responseError: (error) => {
 console.error(error);
 return Promise.reject(error);
 },
});

export function get(url, params = {}) {
 return instance.get(url, { params });
}

export function post(url, data = {}, config = {}) {
 return instance.post(url, data, config);
}

export function put(url, data = {}, config = {}) {
 return instance.put(url, data, config);
}

export function del(url, params = {}) {
 return instance.delete(url, { params });
}

javascript// axios.jsimport { get } from './main';

const res = await get('/api/data');
console.log(res.data);

const data = { name: 'John', age:30 };
const res = await post('/api/create', data);
console.log(res.data);

**注释**

* `axios.create()`：创建一个 axios 实例。
* `instance.interceptors.push()`：设置一个错误拦截器。
* `get()`, `post()`, `put()` 和 `delete()`：封装好的 axios 请求函数。
* `Promise.reject(error)`：返回一个 rejected 的 promise，用于处理错误。