在现代前端开发中,与后端进行数据交互是不可避免的一部分。Uni-app作为一个多平台框架,提供了许多内置API,但有时你可能希望自定义一个简洁且高效的请求库。本文将介绍如何以100行代码打造一个小而美的uni-app请求库。
准备工作
在开始编写请求库之前,请确保你已经安装并配置好HBuilderX和uni-app开发环境。如果你还没有创建项目,可以通过以下步骤快速创建:
- 打开HBuilderX,选择“文件” -> “新建” -> “项目” -> “uni-app”。
- 根据提示创建新项目。
请求库设计
我们的请求库将包含以下功能:
- 基于Promise的请求方法。
- 请求和响应拦截器。
- 错误处理和统一的响应结构。
代码实现
以下是我们的请求库的完整代码:
// request.js
const BASE_URL = 'https://api.example.com';
// 请求拦截器
function requestInterceptor(config) {
// 在发送请求之前做些什么
console.log('Request Interceptor:', config);
config.header = config.header || {};
config.header['Authorization'] = 'Bearer token';
return config;
}
// 响应拦截器
function responseInterceptor(response) {
// 对响应数据做点什么
console.log('Response Interceptor:', response);
if (response.statusCode === 200) {
return response.data;
} else {
return Promise.reject(response);
}
}
// 请求函数
function request(options) {
options.url = BASE_URL + options.url;
options = requestInterceptor(options);
return new Promise((resolve, reject) => {
uni.request({
...options,
success: (response) => {
try {
const result = responseInterceptor(response);
resolve(result);
} catch (error) {
reject(error);
}
},
fail: (error) => {
reject(error);
}
});
});
}
// GET 请求
function get(url, params = {}, header = {}) {
return request({
url,
method: 'GET',
data: params,
header
});
}
// POST 请求
function post(url, data = {}, header = {}) {
return request({
url,
method: 'POST',
data,
header
});
}
// 导出方法
export default {
get,
post
};
使用示例
创建完成请求库后,可以在项目中轻松使用它进行HTTP请求。以下是一个简单的示例:
// 在页面中引入请求库
import request from '@/utils/request.js';
export default {
data() {
return {
info: null,
};
},
onLoad() {
this.fetchData();
},
methods: {
async fetchData() {
try {
const response = await request.get('/data', { id: 123 });
this.info = response;
console.log('Data:', response);
} catch (error) {
console.error('Error:', error);
}
}
}
};
小结
通过以上步骤,我们用不到100行代码创建了一个简洁且功能强大的请求库。这个库包含了基本的请求和响应拦截器,以及常用的GET和POST方法。你可以根据实际需求进行扩展,例如增加更多的HTTP方法(PUT、DELETE等)、增强错误处理逻辑等。
希望这个教程对你在uni-app开发中有所帮助!如果有任何问题或建议,欢迎讨论和交流。