request 请求类封装

一：前言：

request 请求数据的三种方式

request 请求数据的第一种方式  需要在methods当中定义一个方法，然后在onLoad()方法当中 ， 监听页面加载的时候，当页面进行加载，调用该方法，进行数据的获取

但是这里获取到的数据是没有进行加工的，获取到的都是当前页面当中的所有数据

onLoad(){
        // 初始化事件,调用后台数据获取到数据
			this.init()
        }
 
methods: {
			//初始化事件，获取顶部选项卡
			//request的第一种请求方式
			init(){
				uni.request({
					url: 'http://ceshi3.dishait.cn/api/index_category/data',
					method: 'GET' ,
					data: {},
					success: res =>{
						console.log(res)
					},
					fail:()=>{
						console.log('请求失败')
					},
					complete:() =>{
						console.log('请求完成')
					}
				});
			},
		}

request 请求数据的第二种方式  是通过promise 方法当中的  .then()  方法进行数据的获取

onLoad(){
        // 初始化事件,调用后台数据获取到数据
			this.init()
        }
 
methods: {
			//初始化事件，获取顶部选项卡
			//request的第二种请求方式 promise  使用的是 .then 方法进行获取
			init(){
				uni.request({
					url: 'http://ceshi3.dishait.cn/api/index_category/data',
					method: 'GET' ,
				}).then(data => {
					let [error , result] = data 
					console.log(error);
					// 请求的数据出现失败的时候,返回的数据信息
					if(result.statusCode !== 200){
                           //请求的信息出现错误的时候，
						return console.log(result.data.msg) 
					}else {
						console.log(result);
					}
				})
			},
		}

request 请求数据的第二种方式  是通过async 和 await 来进行数据的获取

onLoad(){
        // 初始化事件,调用后台数据获取到数据
			this.init()
        }
 
methods: {
			//初始化事件，获取顶部选项卡
			//request的第三种请求方式 async await
			async init(){
				let [error, result] = await uni.request({
					url: 'http://ceshi3.dishait.cn/api/index_category/data',
					method: 'GET',
				});
				console.log(error);
				// 请求的数据出现失败的时候,返回的数据信息
				if (result.statusCode !== 200) {
					return console.log(result.data.msg) //请求的信息出现错误的时候，
				} else {
					console.log(result);
				}
			},
		}

        以上三种数据的请求方式都可以获取到url里面的数据信息

二：request的封装和使用 (未对get和post 进行封装）

通过以上三种request 的请求，我们可以对request类数据请求进行一个简单类型的封装，

封装代码如下（可能存在不同）

该文件是在common底下lib文件夹下面的request.js文件

export default {
	//全局配置
	common: {
		baseurl: "http:// ceshi3.dishait.cn/api",
		//请求头header是告诉浏览器你发送的数据格式是什么,浏览器接收后做相对应的处理并返回你要的数据格式!!!
		header: {
			'Content-Tlype ': ' application/json;charset=UTF-8 ',
			'Content-Type': 'application/x- www-form-urlencoded '
		},
		data:{},
		method:'GET',
		dataType:'json'
	},
	//请求返回 promise
	request(options = {} ){
		//组织参数
		options.url = this.common.baseurl + options.url
		options.header = options.header || this.common.header
		options.data = options.data || this.common.data
		options.method = options.method || this.common.method
		options.dataType = options.dataType || this.common.dataType
		
		//请求数据
		return new Promise ((res,rej)=>{
			// 请求前
			// 在此处,我们可以进行token的验证操作
			//请求中
			uni.request({
				...options,
				success:res =>{
					//服务端失败
					if(result.statusCode !==200){
						uni.showToast({
							title:result.data.msg || '服务端失败',
							icon:"none"
						});
						return rej()
					}
					//服务端数据请求成功
					let data = result.data.msg
					res(data)
				},
				fail:(error) =>{
					uni.showToast({
						title:error.errMsg || '请求失败',
						icon:"none"
					});
					return rej()
				}
			})
		})
	},
}

当我们没有对get或者poet请求进行封装的时候，我们在使用的时候需要进行如下的书写。

在应用的时候，我们需要先引用该文件，在可以进行使用

import $H from '@/common/lib/request.js';
 
onLoad() {
			// 初始化事件,调用后台数据获取到数据
			this.init()
		},
 
methods: {
            // 封装完成之后,进行数据的请求
			 init(){
				$H.request({
					url:"/index_category/data"
				}).then((res)=>{
					console.log("请求成功")
					console.log(res)
				}).catch(()=>{
					console.log("请求失败")
				})
			},
         }

三：request的封装和使用 (对get和post 进行封装）

export default {
	//全局配置
	common: {
		baseurl: "http:// ceshi3.dishait.cn/api",
		//请求头  ,header是告诉浏览器你发送的数据格式是什么,浏览器接收后做相对应的处理并返回你要的数据格式!!!
		header: {
			'Content-Tlype ': ' application/json;charset=UTF-8 ',
			'Content-Type': 'application/x- www-form-urlencoded '
		},
		data:{},
		method:'GET',
		dataType:'json'
	},
	//请求返回 promise
	request(options = {} ){
		//组织参数
		options.url = this.common.baseurl + options.url
        //这里的header头部需要在验证token之后才可以进行使用
		options.header = options.header || this.common.header
		options.data = options.data || this.common.data
		options.method = options.method || this.common.method
		options.dataType = options.dataType || this.common.dataType
		
		//请求数据
		return new Promise ((res,rej)=>{
			// 请求前
			// 在此处,我们可以进行token的验证操作
			//请求中
			uni.request({
				...options,
				success:res =>{
					//服务端失败
					if(result.statusCode !==200){
						uni.showToast({
							title:result.data.msg || '服务端失败',
							icon:"none"
						});
						return rej()
					}
					//服务端数据请求成功
					let data = result.data.msg
					res(data)
				},
				fail:(error) =>{
					uni.showToast({
						title:error.errMsg || '请求失败',
						icon:"none"
					});
					return rej()
				}
			})
		})
	},
	//get 请求
	get(url , data = {} , options = {}){
		options.url = url
		options.data = data
		options.method = "GET"
		return this.request(options)
	},
	//post 请求
	post(url , data = {} , options = {}){
		options.url = url
		options.data = data
		options.method = "POST"
		return this.request(options)
	}
}

请求方式也封装成功之后，对数据的请求的两种获取方式如下：

方式一：

import $H from '@/common/lib/request.js';
 
onLoad() {
			// 初始化事件,调用后台数据获取到数据
			this.init()
		},
 
methods: {
           	//封装get请求之后，进行数据的请求  获取方式一
			async init(){
				let data =await $H.get("/index_category/data")
				// 判断里面是否存在数据
                //下方就是对获取到的数据进行加工提炼，将相应的数据进行获取
				if(data){
					//初始化tabBars
					this.tabBars = data.category
					console.log(data.category)
				}
			},
         }

方式二：

import $H from '@/common/lib/request.js';
 
onLoad() {
			// 初始化事件,调用后台数据获取到数据
			this.init()
		},
 
methods: {
           //封装get请求之后，进行数据的请求 获取方式二:
		    init(){
				$H.get('/index_category/data').then((res)=>{
					//初始化tabBars
					this.tabBars = res.category
					console.log(res.category)
				})
			},
         }

后续会加上token验证之后，对其封装进行对应的补充