解决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的使用方法

  • 6
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 1
    评论
uni-app使用axios,你可以按照以下步骤进行操作: 1. 首先,安装axios库。你可以使用npm或者yarn来安装axios。在终端运行以下命令: ``` npm install axios ``` 或者 ``` yarn add axios ``` 2. 在你的代码引入axios。你可以在需要使用axios的地方引入它。例如,在你的组件的script标签添加以下代码: ```javascript import axios from 'axios'; ``` 3. 使用axios发送请求。你可以使用axios的各种方法来发送请求,比如get、post等。以下是一个使用get方法发送请求的示例: ```javascript axios.get('https://api.example.com/data') .then(response => { console.log(response.data); }) .catch(error => { console.error(error); }); ``` 这样就可以在uni-app使用axios发送请求了。记得根据你的具体需求来配置axios的请求参数和处理响应的方式。 #### 引用[.reference_title] - *1* *3* [vite4 + vue3 + pinia + axios + vue-router + elementPlus](https://blog.csdn.net/HeMister/article/details/130132751)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^control_2,239^v3^insert_chatgpt"}} ] [.reference_item] - *2* [uniapp+Vue3+Vite+ts+pinia](https://blog.csdn.net/qq_38687592/article/details/129181727)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^control_2,239^v3^insert_chatgpt"}} ] [.reference_item] [ .reference_list ]

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

饭一口口吃

来杯咖啡

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值