uniapp封装request请求

忘是亡心i 2022-10-12 15:00 179阅读 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][]

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDc2MzU2OQ_size_16_color_FFFFFF_t_70]

[777c8043f1259002e7f925313ffa12aa.png]: /images/20221005/8ea3b01a26804557923636db2dff2920.png
[d41c15df5505c33400d044f16297b564.png]: /images/20221005/bdef586c8b2d4a00a5aa3f71074e565e.png
[4ed2880bd75bc657f71b314d2f0b9b5a.png]: /images/20221005/386f0112b0114487bc3efdb796f5eac6.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDc2MzU2OQ_size_16_color_FFFFFF_t_70]: /images/20221005/0105288868b74ae0a81be90426c656bc.png