解决uniApp 中不能直接使用 Axios 的问题

最近在使用 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的使用方法

相关推荐

最近更新

  1. docker php8.1+nginx base 镜像 dockerfile 配置

    2024-05-26 05:20:18       94 阅读
  2. Could not load dynamic library ‘cudart64_100.dll‘

    2024-05-26 05:20:18       100 阅读
  3. 在Django里面运行非项目文件

    2024-05-26 05:20:18       82 阅读
  4. Python语言-面向对象

    2024-05-26 05:20:18       91 阅读

热门阅读

  1. 关系型数据库的三范式理解

    2024-05-26 05:20:18       38 阅读
  2. 汇编小程序

    2024-05-26 05:20:18       27 阅读
  3. 怎样使用类和对象

    2024-05-26 05:20:18       26 阅读
  4. CentOS配置应用服务自启动

    2024-05-26 05:20:18       28 阅读
  5. 单体应用与微服务的优缺点

    2024-05-26 05:20:18       33 阅读
  6. Vue 组件的生命周期钩子有哪些用途是什么

    2024-05-26 05:20:18       28 阅读
  7. 家政项目day3 区域服务模块开发

    2024-05-26 05:20:18       33 阅读
  8. [个人笔记] 记录CentOS7构建docker-ce的过程

    2024-05-26 05:20:18       30 阅读
  9. FOC之反park变化推导笔记

    2024-05-26 05:20:18       21 阅读
  10. git push

    2024-05-26 05:20:18       22 阅读
  11. 基于python flask的web服务

    2024-05-26 05:20:18       25 阅读
  12. Vue3:封装Table 表格组件问题修改

    2024-05-26 05:20:18       37 阅读