uniapp封装request请求

今天药忘吃喽~ 2022-10-11 00:45 194阅读 0赞

步骤如下：

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

![777c8043f1259002e7f925313ffa12aa.png][]

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

思路很简单

定义域名：baseUrl；  
定义方法：api；  
通过promise异步请求，最后导出方法。

request.js参考代码如下

// request.js
    // 通常可以吧 baseUrl 单独放在一个 js 文件了
    const baseUrl = 'http://xxx.xxx.4.xxxx:8093/chemApp'  
    
     const request = (options = {}) => {
     // 在这里可以对请求头进行一些设置
     // 例如：
     // options.header = {
    //      "Content-Type": "application/x-www-form-urlencoded"
    // }
        return new Promise((resolve, reject) => {
            uni.request({
                url: baseUrl + options.url || '',
                method: options.type || 'GET',
                data: options.data || {},
                header: options.header || {}      
            }).then(data => {
                let [err, res] = data;        
                resolve(res);
            }).catch(error => {
                reject(error)
            })
        });
    }
    
     const get = (url, data, options = {}) => {
        
        options.type = 'GET';
        options.data = data;
        options.url = url;
        return request(options)
    }
    
    const post = (url, data, options = {}) => {
        options.type = 'POST';
        options.data = data;
        options.url = url;
        return request(options)
    }
    
    
    export default  {
        request,
        get,
        post
    }

3、在main.js全局注册

import Vue from 'vue'
    import App from './App'
    import request from 'common/request.js'
    Vue.prototype.$request = request 
    Vue.config.productionTip = false
    App.mpType = 'app'
    const app = new Vue({
        ...App
    })
    app.$mount()

![d41c15df5505c33400d044f16297b564.png][]

4、页面调用,发起一个get请求

this.$request.get('/caller/getCallers.action', {
                        "name": "", // 当前页码
                        "pageBean.page": 1, // 当前页码
                        "pageBean.rows": 2, // 每页显示数量               
                        "pageBean.pagination": true
                    }).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.get('/caller/getCallers.action', {
                        // 传参参数名：参数值,如果没有，就不需要传
                        // "username": "john",
                        // "key": this.searchValue
                    }).then(res => {
                        // 打印调用成功回调
                        console.log(res)
                        this.productList = res;
                    })
                },
            }
        }
    </script>
    <style>
    </style>

调用成功

![4ed2880bd75bc657f71b314d2f0b9b5a.png][]

[777c8043f1259002e7f925313ffa12aa.png]: /images/20221005/7ac40d2a50e94439892655526e91d566.png
[d41c15df5505c33400d044f16297b564.png]: /images/20221005/e0df3c8b6b2e40429f47e0979d4f761b.png
[4ed2880bd75bc657f71b314d2f0b9b5a.png]: /images/20221005/7c43d31d05c0425d8d7f15e0a2cb46e5.png