uni-app封装一个request请求

傷城~ 2022-12-19 03:38 234阅读 0赞

在上一篇文章里面，写到使用uni.request请求的方法  
https://www.jianshu.com/p/bc62c9e1beed

getList() {			
    				uni.request({
    					url: "https://unidemo.dcloud.net.cn/api/news",					
    					method: 'get',
    					dataType: 'json',
    					success: (res) => {
    						console.log(res.data);
    						this.productList = res.data;
    					},					
    				});
    			},

但是实际做项目的时候，会发现每个界面都要重复的写这些，看起来重复又啰嗦，心情就十分的不美丽了。

如果不封装那么我们会面临几个不方便的地方：

请求头每次网络请求都要单独设置
    返回数据的正确性判断每次都要重复大量代码
    返回数据格式有变化需要修改所有网络请求的地方

那么，该怎么使用uni-app封装一个request请求？步骤很简单，且听我一一道来。

注意：使用的例子，来自于这篇文章的相关的代码，修改封装请求是基于这个文章里面代码。进行相关的修改的。  
https://www.jianshu.com/p/bc62c9e1beed

步骤如下：

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

![276d96769c6188c1092da5f6cedba884.png][]

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

思路很简单

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

request.js参考代码如下

##### 3、在main.js全局注册 #####

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

![2a58e8f2bd063341893bd685170bcb84.png][]

##### 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>

成功显示  
![eb253c9487bbc9e917a0890815711131.png][]

好了，完结，散花，准备睡觉！！  
各位路过的小哥哥，小姐姐，喜欢的就点个赞呗。

![欢迎关注【编程微刊】公众号，回复【领取资源】,500G编程学习资源干货免费送。][500G]

[276d96769c6188c1092da5f6cedba884.png]: /images/20221120/34317f2ba71046c6beef225aa2f20219.png
[2a58e8f2bd063341893bd685170bcb84.png]: /images/20221120/8efe2b1a3f88412c93dbc934c05cff23.png
[eb253c9487bbc9e917a0890815711131.png]: /images/20221120/9f2e25bd67dd4cd6bf7e0495eaf4c8d8.png
[500G]: /images/20221120/716e74c9d6244870bfd312f6df70814b.png