uni-app 基于 Promise 的 request 请求封装

朱雀 2021-03-29 11:17 696阅读 0赞

在使用 uni-app 开发前端的过程中，uni-app 官方已为我们提供了非常丰富的组件和 API，比如 uni.request 网络请求，如果我们直接在代码中使用会造成较多的冗余，因此一般都会进行封装。之前有介绍过 uni.request 的基础封装，今天介绍另一种封装方式：基于 promise 的封装方式。

### 创建http.js

在项目根路径下新建 commons 文件夹，并创建一个 http.js，内容如下：

```javascript
const baseUrl = 'http://127.0.0.1:8080/api/'

const showToast = (title) => {
    uni.showToast({
        title: title,
        icon: 'none'
    })
}

/**请求接口
 * @method http
 * @param {String} url 接口地址
 * @param {Object} data 接口参数
 * @param {Object} option 接口配置信息，可选
 * @return {Object} Promise
 */
const http = (url, data = {}, option = {}) => {
    let hideLoading = option.hideLoading || false // 是否显示 loading
    let hideMsg = option.hideMsg || false // 是否隐藏错误提示
    let token = '' // 登录鉴权获得的 token
    uni.getStorage({
        key: 'token',
        success: (ress) => {
            token = ress.data
        }
    })
    if (!hideLoading) {
        uni.showLoading({
            title: '加载中...',
            mask: true
        })
    }
    return new Promise((resolve, reject) => {
        uni.request({
            url: baseUrl + url,
            method: option.method || 'POST', // 默认 post 请求
            header: {
                'Token': token
            },
            data: data,
            success: res => { // 服务器成功返回的回调函数
                if (!hideLoading) uni.hideLoading()
                if (res.statusCode === 200) {
                    let result = res.data
                    if (result.errcode === '0') {
                        resolve(result)
                        return
                    }
                    reject(result.errmsg)
                    if (!hideMsg) showToast(result.errmsg)
                } else { // 返回值非 200，强制显示提示信息
                    showToast('[' + res.statusCode + '] 系统处理失败')
                    reject('[' + res.statusCode + '] 系统处理失败')
                }
            },
            fail: (err) => { // 接口调用失败的回调函数
                if (!hideLoading) uni.hideLoading()
                if (err.errMsg != 'request:fail abort') {
                    showToast('连接超时，请检查您的网络。')
                    reject('连接超时，请检查您的网络。')
                }
            }
        })
    })
}
export default http
```

### 需要使用的页面中，导入和使用 http

```javascript
<script>
    import http from '@/commons/http.js'

export default {
        data() {
            return {
            }
        },
        onLoad() {
        },
        methods: {
            loadData (id) {
                http('data/get', {
                    id: id
                }, {
                    hideLoading: false, // 默认 false
                    hideMsg: true, // 默认 false
                    method: 'POST' // 默认 POST
                }).then(res => {
                    console.log(res.data)
                }).catch(err => {
                    console.error(err)
                })
            }
        }
    }
</script>
```