最近在使用 uniapp 进行小程序开发的时候,发现 uniapp 不能直接使用 axios,需要自己进行封装一个 http 库使用,于是有了这个项目。
项目地址:https://www.npmjs.com/package/uni-app-wxnetwork-tool
该包的功能介绍:
uni-app-wxnetwork-tool 是一个专为 UniApp 开发的轻量级 HTTP 请求库,旨在解决 UniApp 中不能直接使用 Axios 的问题。该库封装了 UniApp 的 request API,提供了简单易用的 GET、POST、PUT、DELETE 请求方法,并支持全局请求和响应拦截器,便于处理全局加载动画、请求头设置和统一的错误处理。
安装
npm install uni-app-wxnetwork-tool
使用方法
GET 请求
获取数据时使用:
async function fetchData() {
try {
const response = await $http.get('/api/example', { param1: 'value1' });
console.log(response);
} catch (error) {
console.error(error);
}
}
POST 请求
提交数据时使用:
async function postData() {
try {
const response = await $http.post('/api/example', { key1: 'value1', key2: 'value2' });
console.log(response);
} catch (error) {
console.error(error);
}
}
PUT 请求
更新数据时使用:
async function updateData() {
try {
const response = await $http.put('/api/example/1', { key1: 'newValue' });
console.log(response);
} catch (error) {
console.error(error);
}
}
DELETE 请求
删除数据时使用:
async function deleteData() {
try {
const response = await $http.delete('/api/example/1');
console.log(response);
} catch (error) {
console.error(error);
}
}
通过这些简单的示例,你可以快速了解如何在 UniApp 中使用 uni-app-wxnetwork-tool
进行常见的 HTTP 请求操作。
初始化请求实例
在你的项目中创建一个 main.js 文件,并初始化请求实例:
import { $http } from '@escook/request-miniprogram'
uni.$http = $http
在Page.vue中使用案例
<template>
<view>
Cate
</view>
</template>
<script>
import { $http } from '../../utils/network_tool';
export default {
data() {
return {};
},
onLoad() {
this.ceshi();
},
methods: {
async ceshi() {
const res = await $http.get('/api/flootList');
console.log(res);
}
}
};
</script>
<style lang="scss">
</style>
这个就是uni-app-wxnetwork-tool的使用方法