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>