uniapp封装get和post请求

UniApp封装了get和post请求，可以通过uni.request()函数来发送请求。其中get请求的参数可以通过拼接在url上，也可以通过params参数传递；post请求的参数则需要通过data参数传递。在uni.request()函数中可以设置请求头、超时时间、响应数据类型等。

相关问题

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]。

uniapp 封装app网络请求

uniapp是一个基于Vue.js的跨平台应用开发框架，它允许开发者编写一次代码，即可生成运行在微信小程序、H5、App等多端的应用。对于网络请求的封装，uniapp提供了一个叫做`u-request`的模块，用于简化开发者处理网络请求的过程。

在uniapp中，你可以按照以下步骤封装网络请求：

1. 引入依赖：首先需要在项目中导入`u-request`库，通常在`main.js`文件中添加：

   import uView from '@dcloudio/uni-view'
   import uRequest from '@/utils/request'

2. 创建实例：创建一个统一的请求实例，可以配置全局的基础URL、拦截器等：

   const service = uRequest({
     baseUrl: 'https://api.example.com', // 根据实际API地址替换
     timeout: 10000, // 请求超时时间
     withCredentials: true, // 是否携带cookie
   })

3. 发送请求：封装各种HTTP方法如GET、POST、PUT等：

   export function get(url) {
     return service.get(url)
   }

   export function post(url, data) {
     return service.post(url, data)
   }

4. 使用封装后的函数：在业务组件中通过返回Promise的方式调用这些封装好的方法，比如获取数据：

   async fetchData() {
     try {
       const response = await get('/users')
       console.log(response.data)
     } catch (error) {
       console.error('请求失败', error)
     }
   }