uni-app中封装uni-request清新简约版

在uni-app中，存在一个uni-request这样一个API，专门用来请求数据，但是当做一个大型项目时，如果不进行封装，代码将会特别冗长且凌乱，于是，人们喜欢将uni-request提取出来，封装成一个函数。不过各公司需求不同，封装的函数也是五花八门，本文章是一个最基础的封装结果。不多BB，直接开始！

1. 确定请求的地址。

// index.js
const baseUrl = "http://www.hentai.com/api"

1. 将请求的加载loading放进封装的函数中，增加用户体验。uni-app使用uni.showLoading()和uni.hideLoading()作为加载loading。

// index.js
export function request (options) {
const { url, method, data, header } = options
uni.showLoading({  //加载loading开始
title: '加载中'
});
return new Promise((resolve, reject) => {
uni.request({
url: baseUrl + url,
data: data || {},
method: method || 'GET',
header: header || {},
timeout: 6000, // 请求超时时间设置
success: (res) => {
resolve(res)
},
fail: (err) => {
reject(err)
},
complete: () => {
uni.hideLoading() // 请求成功后让加载loading消失
}
})
})
}

3.在需要使用的页面中引入

// home.vue
<script>
// 引入
import { request } from './index.js'
// 以请求bannner为例
export default {
data() {
return {
bannerlist: [],
}
},
mounted (){
request({
url: '/pro/banner'
}).then(res => {
this.bannerlist = res.data.data
})
}
}
</script>

逆战期间！停工不停学，宅家不闲手。在下新型冠状蔷薇希望这篇文章能够对你有一点的帮助。(╯‵□′)╯︵┻━┻