uni-app 安装 uni-app-fetch 进行接口请求的封装

1、在 uni-app 中通过 uni.request 发起网络请求,在实际的应用中需要结合一些业务场景进行二次封装,比如配置 baseURL、拦截器等,

1、uni-app-fetch 是对 uni.request 的封装,通过 npm 来安装该模块

javascript 复制代码
# 安装 uni-app-fetch 模块
npm install uni-app-fetch

2、然后根据自身的业务需求来配置 uni-app-fetch

javascript 复制代码
// apis/uni-fetch.js

// 导入安装好的 uni-app-fetch 模块
import { createUniFetch } from 'uni-app-fetch'

// 配置符合自身业务的请求对象
export const uniFetch = createUniFetch({
	loading: { title: '正在加载...' },
	baseURL: 'https://slwl-api.itheima.net',
	intercept: {
		// 请求拦截器
		request(options) {
			// 后续补充实际逻辑
      return options
		},
		// 响应拦截器
		response(result) {
			// 后续补充实际逻辑
      return result
		},
	},
})

3、 自己的接口来测试一下

javascript 复制代码
<!-- pages/task/index.vue -->
<script setup>
  // 导入根据业务需要封装好的网络请求模块
	import { uniFetch } from '@/apis/uni-fetch'
	// 不关注请求结果是否有数据
	uniFetch({
		url: '/driver/tasks/list',
	})
</script>
相关推荐
林涧泣8 小时前
【Uniapp-Vue3】开发userStore用户所需的相关操作
前端·vue.js·uni-app
css趣多多12 小时前
使用git管理uniapp项目
uni-app
前端小雪的博客.1 天前
Uniapp 小程序复制、粘贴功能实现
小程序·uni-app
竣子好逑1 天前
uniapp v2 组件
前端·uni-app
筱歌儿1 天前
uniapp 阿里云点播 播放bug
uni-app·bug
陆康永1 天前
uniapp-X 对象动态取值
uni-app
林涧泣1 天前
【Uniapp-Vue3】登录成功后获取当前用户信息并渲染到页面中
前端·javascript·uni-app
前端小雪的博客.1 天前
Uniapp 小程序接口封装与使用
微信小程序·uni-app
离别又见离别1 天前
uniapp 本地数据库多端适配实例(根据运行环境自动选择适配器)
数据库·vue.js·sqlite·uni-app·db
香菜的开发日记1 天前
uniapp 系统学习,从入门到实战(四)—— 页面与路由管理
uni-app