Uni-app中封装request网络请求 ai生成

在Uni-app中封装request网络请求，我们需要考虑如何统一处理请求和响应，以及如何方便地配置请求参数。以下是一个简单的封装示例：

1. 配置请求参数

在项目中新建一个config文件夹，里面新建一个config.js文件，用于存放请求接口的一些配置参数。示例代码如下：

// config.js

const baseURL = 'https://api.example.com/';

export default {
  baseURL,
  timeout: 10000, // 请求超时时间
  header: {
    'Content-Type': 'application/json'
  }
}

在这里，我们定义了请求的基础URL、请求超时时间和请求头参数，可以根据需要修改。

1. 封装request方法

我们将请求方法封装在一个util.js文件中，这里使用了Promise对象和async/await结合的方式，代码如下：

// util.js

import config from '../config/config.js'

export function request(url, method = 'GET', data = {}) {
  return new Promise((resolve, reject) => {
    uni.request({
      url: config.baseURL + url,
      method: method,
      data: data,
      header: config.header,
      timeout: config.timeout,
      success: res => {
        resolve(res.data)
      },
      fail: err => {
        reject(err)
      }
    })
  })
}

// 封装GET请求方法
export function get(url, data = {}) {
  return request(url, 'GET', data)
}

// 封装POST请求方法
export function post(url, data = {}) {
  return request(url, 'POST', data)
}

在这里，我们封装了request方法用于发起请求，同时使用了config.js中定义的配置参数。我们还封装了get和post方法，方便用户使用。

1. 使用request方法

在需要使用请求接口的页面中，引入util.js，并调用相应的方法即可：

import { get, post } from '../../utils/util.js'

// GET请求示例
get('/api/data', { id: 1 }).then(res => {
  console.log(res)
}).catch(err => {
  console.log(err)
})

// POST请求示例
post('/api/login', { username: 'admin', password: '123456' }).then(res => {
  console.log(res)
}).catch(err => {
  console.log(err)
})

在这里，我们使用了get和post方法，传递了对应的请求路径和参数。

这样，我们就成功地封装了一个request网络请求接口，通过config.js文件可以方便地配置请求参数，通过util.js文件可以方便地调用请求方法，同时也方便了对请求和响应的统一处理。