uniApp封装请求

简介: uniApp封装请求


一、request封装

  1. 创建一个api文件夹,用于存放所有的API接口文件。
  2. 在api文件夹中创建一个request.js文件,用于配置接口的路由信息、请求地址和请求方法等信息。示例代码如下:

 

const BASE_URL = 'http://example.com/api' // 替换为你的接口基础URL
export const request = (url, method = 'GET', data = {}) => {
  return new Promise((resolve, reject) => {
    uni.request({
      url: BASE_URL + url,
      method: method,
      data: data,
      header: {
        'Content-Type': 'application/json' // 根据接口要求设置请求头
      },
      success: res => {
        if (res.statusCode === 200) {
          resolve(res.data)
        } else {
          reject(res)
        }
      },
      fail: err => {
        reject(err)
      }
    })
  })
}

在上述代码中,我们首先定义了接口的基础URL BASE_URL,然后封装了一个request函数,用于发起请求。该函数接收三个参数:url表示请求的具体路径,method表示请求方法,默认为GETdata表示请求的参数,默认为空对象。

request函数内部,我们通过uni.request发起请求,将请求的URL拼接为完整的请求路径,并根据传入的参数设置请求的方法、数据和请求头。当请求成功时,如果statusCode为200,则将返回的数据通过resolve传递出去;否则,将返回的错误信息通过reject传递出去。当请求失败时,也会将错误信息通过reject传递出去。

使用封装的请求函数时,可以在其他地方引入request.js文件,并调用request函数发起请求,例如:

import { request } from '@/api.js'
// 发起GET请求
request('/user', 'GET')
  .then(res => {
    console.log(res)
  })
  .catch(err => {
    console.error(err)
  })
// 发起POST请求
request('/login', 'POST', { username: 'admin', password: '123456' })
  .then(res => {
    console.log(res)
  })
  .catch(err => {
    console.error(err)
  })
目录
相关文章
|
2月前
uniApp常用功能封装
uniApp常用功能封装
35 0
|
21天前
uniapp实战 —— 轮播图【数字下标】(含组件封装,点击图片放大全屏预览)
uniapp实战 —— 轮播图【数字下标】(含组件封装,点击图片放大全屏预览)
22 1
|
21天前
uniapp实战 —— 轮播图【自定义指示点】(含组件封装,自动注册全局组件,添加全局组件类型声明)
uniapp实战 —— 轮播图【自定义指示点】(含组件封装,自动注册全局组件,添加全局组件类型声明)
25 1
|
20天前
uniapp【组件封装】时间戳格式化为星期
uniapp【组件封装】时间戳格式化为星期
14 0
|
2月前
|
移动开发 前端开发 JavaScript
uniapp中IO模块(管理本地文件系统)的常用功能封装
uniapp中IO模块(管理本地文件系统)的常用功能封装
184 1
|
2月前
|
SQL 开发框架 数据库连接
uniapp中sqlite数据库常用操作的简单封装
uniapp中sqlite数据库常用操作的简单封装
112 0
|
2月前
|
前端开发
uniapp如何封装接口
uniapp如何封装接口
84 0
|
2月前
|
前端开发 JavaScript 小程序
【uniapp】十分钟带你封装uniapp的api请求
【uniapp】十分钟带你封装uniapp的api请求
236 0
|
13天前
|
JavaScript Java 测试技术
基于SpringBoot+Vue+uniapp的房屋租赁App的详细设计和实现(源码+lw+部署文档+讲解等)
基于SpringBoot+Vue+uniapp的房屋租赁App的详细设计和实现(源码+lw+部署文档+讲解等)
基于SpringBoot+Vue+uniapp的房屋租赁App的详细设计和实现(源码+lw+部署文档+讲解等)
|
13天前
|
JavaScript Java 测试技术
基于SpringBoot+Vue+uniapp的武汉市公交路线查询系统的详细设计和实现(源码+lw+部署文档+讲解等)
基于SpringBoot+Vue+uniapp的武汉市公交路线查询系统的详细设计和实现(源码+lw+部署文档+讲解等)

热门文章

最新文章