uniapp如何封装request请求

发布时间:2022-05-23 发布网站:脚本宝典
脚本宝典收集整理的这篇文章主要介绍了uniapp如何封装request请求脚本宝典觉得挺不错的,现在分享给大家,也给大家做个参考。

uniapp封装request请求的方法:首先项目下新建common文件夹,再创建【request.js】文件;然后打开【request.js】文件,开始写封装的代码;最后通过promise异步请求,最后导出方法。

uniapp如何封装request请求

本教程操作环境:windows7系统、uni-app2.5.1版本、ThinkPad t480脑。

推荐(免费):uni-app开发教程

uniapp封装request请求的方法:

1、项目下新建common文件夹,再创建request.js文件

uniapp如何封装request请求

2、打开request.js文件,开始写封装的代码

思路很简单

  • 定义域名:baseUrl;

  • 定义方法:api;

通过PRomise异步请求,最后导出方法。

request.js参考代码如下

@H_777_46@const baseUrl = 'https://unidemo.dcloud.net.cn' const request = (url = '', date = {}, tyPE = 'GET', header = { }) => { return new Promise((resolve, reject) => { uni.request({ method: type, url: baseUrl + url, data: date, header: header, dataType: 'json', }).then((response) => { setTimeout(function() { uni.hideLoading(); }, 200); let [error, res] = response; resolve(res.data); }).catch(error => { let [err, res] = error; reject(err) }) }); } export default request

3、在main.js全局注册

import request From 'common/request.js'
Vue.prototype.$request = request

uniapp如何封装request请求

4、页面调用

this.$request('/api/news', {
// 传参参数名:参数值,如果没有,就不需要传
}).then(res => {
// 打印调用成功回调
console.LOG(res)
})

页面调用的index.vue

<template>
    <view>
        <uni-list v-for="(ITem,index) in productList" :key="index">
            <uni-list-item :title="item.author_name" :note="item.title"></uni-list-item>
        </uni-list>
    </view>
</template>
<script>
    import uniList from "@/components/uni-list/uni-list.vue"
    import uniListItem from "@/components/uni-list-item/uni-list-item.vue"
    export default {
        components: {
            uniList,
            uniListItem
        },
        data() {
            return {
                productList: [],
            };
        },
        onLoad() {
            this.getList();
        },
        methods: {
            getList() {
                this.$request('/api/news', {
                    // 传参参数名:参数值,如果没有,就不需要传
                    // "username": "john",
                    // "key": this.seArchValue
                }).then(res => {
                    // 打印调用成功回调
                    console.log(res)
                    this.productList = res;
                })
            },
        }
    }
</script>
<style>
</style>

相关免费学习推荐:编程视频

以上就是uniapp如何封装request请求的详细内容,更多请关注脚本宝典其它相关文章

脚本宝典总结

以上是脚本宝典为你收集整理的uniapp如何封装request请求全部内容,希望文章能够帮你解决uniapp如何封装request请求所遇到的问题。

如果觉得脚本宝典网站内容还不错,欢迎将脚本宝典推荐好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。