uniapp.request的简单封装和调用

根目录新建util文件夹，新增api.js文件

• api.js

/**
 * 接口调用封装文件
 * 作者：z_d_f
 * 时间：2021/06/25
 * 根据uni.request()做进一步封装，采用Promise进行优化响应。
 */
const BASE_URL = "https://api.vvhan.com"  // 豆瓣测试地址

if (process.env.NODE_ENV === 'development') {
    // console.log("开发环境");
} else {
    // console.log("生产环境");
}
    
export const httpRequest = options => {
    return new Promise((resolve, reject) => {
        uni.request({
            url: BASE_URL + options.url,
            method: options.method || "GET",// 请求类型，默认为GET
            data: options.data || {}, // 请求参数，默认空对象
            success: res => {
                // 状态判断，根据后台定义并提示
                console.log(res)
                if (res.data.success) {
                    resolve(res.data.data)
                } else {
                    uni.showToast({
                        title: "获取数据失败："
                    })
                    return
                }
            },
            fail: err => {
                uni.showToast({
                    title: "请求失败！"
                })
                reject(err)
            }
        })
    })
}

main.js引入

import { httpRequest } from './util/api.js'

// 全局注册接口调用方法
Vue.prototype.$httpRequest = httpRequest 

界面调用

• script

<script>
    export default {
        data() {
            return {
                swipers: []
        },
        onLoad() {
            this.getMovieImg()
        },
        methods: {
            async getMovieImg() {
                const res = await this.$http({
                    url: "/api/douban"
                })
                this.swipers = res.data.data.map(r => {
                    return r.info
                })
            }
        }
    }
</script>