uniapp axios封装get post

如何在 UniApp 中使用 Axios 封装 GET 和 POST 请求
安装 Axios
为了能够在 UniApp 项目中使用 axios，需要先安装该库。可以通过 npm 或者 yarn 来完成安装。
npm install axios
登录后复制
或者如果更倾向于使用 yarn：
yarn add axios
登录后复制
此命令会在项目的依赖项中加入 axios 库[^1]。
创建 Axios 实例并设置默认配置
创建一个新的 JavaScript 文件用于定义全局使用的 axios 配置实例。这一步骤有助于统一管理 API 的基础路径和其他通用选项。
// utils/request.js
import axios from 'axios';

const instance = axios.create({
baseURL: "https://api.example.com", // 设置API的基础URL
timeout: 5000, // 超时时间设为5秒
});

export default instance;
登录后复制
上述代码片段展示了如何初始化一个带有特定配置的 axios 实例[^2]。
封装 GET 方法
对于获取数据的操作通常采用 GET 请求方式。下面是一个简单的封装示例，它允许传递查询参数作为对象形式给服务器端接口。
async function fetchData(params) {
try {
const response = await instance.get('/data', { params });
return response.data;
} catch (error) {
throw new Error(`Failed to fetch data: ${error.message}`);
}
}
登录后复制
当调用这个函数时传入 { id: 123, name: 'John Doe' } 类似的参数，则实际发出的请求将会是类似于这样的 URL：https://api.example.com/data?id=123&name=John%20Doe[^3]。
封装 POST 方法
向服务端提交表单或其他类型的 payload 数据一般会选择 POST 方式来做。这里给出了一种处理这种情况的方式——通过构建自定义方法来简化这一过程。
async function postData(url, body) {
try {
const response = await instance.post(url, body);
return response.data;
} catch (error) {
throw new Error(`Post request failed: ${error.message}`);
}
}

// 使用示例，在组件内部调用
postData('/addUser', {
username: 'hhr',
password: 'aini',
power: 1,
}).then((res) => {
console.log('Response:', res);
}).catch((err) => {
console.error('Error occurred during post operation.', err);
});
登录后复制
这段代码说明了怎样利用之前建立好的 axios 实例来进行一次带有效载荷（payload）的数据上传操作，并且指定了目标资源的位置 /addUser[^4]。