request请求封装的使用

1.常规的request请求封装

export default {
	//全局配置
	common: {
		baseurl: "https://meituan.thexxdd.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
		console.log(options)

		//请求数据
		return new Promise((res, rej) => {
			// 请求之前... todo
			// 请求中...
			uni.request({
				...options,
				success: (result) => {
					// 服务端失败
					if (result.statusCode !== 200) {
						uni.showToast({
							title: result.msg || '服务端失败',
							icon: 'none'
						});
						return rej()
					}
					// 成功  这里根据请求的数据，可以直接请求深层次的data数据
                        但是在调用接收的时候，直接使用res即可打印深层次的数据
					res(result.data) 
					// console.log(result.data)
				},
				fail: (error) => {
					uni.showToast({
						title: error.error || '请求失败',
						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)
	},
	// delete请求
	del(url, data = {}, options = {}) {
		options.url = url
		options.data = data
		options.method = 'DELETE'
		return this.request(options)
	}
}

2.调用方法的书写方式

第一种：只需要传递 url 的请求方式，不需要传递其他的参数

//在需要调用该request文件当中的方法的地方，导入该文件
import $H from "@/common/lib/request.js"
	export default {
		data() {
			return {
                //这里存放的是用来接收后台调出的数据
				vaccine: [] ,//用来金刚区的数据数据
				reserve:[],
				popular:[],
				selftest:[]
			}
		},
		onLoad() {
			// 初始化事件,调用后台数据获取到数据
			this.init()
		},
		methods: {
			//封装get请求之后，
			init() {
                //调用里面的get请求，这里只需要传递url地址，不需要传递其他参数
				$H.get("/frontpage").then((res) => {
                //获取数据成功之后，调用上方的存储数组，来接受后台调用出来的数据
                //接收成功之后，直接在页面上进行渲染即可
					this.vaccine = res.data[0].vaccine
					this.reserve= res.data[1].reserve
					this.popular =  res.data[2].popular	
					this.selftest =  res.data[3].self_test
					console.log( res.data)
				})
			},
		}
	}

第二种：在传递url的基础上，还需要传递对应的参数的请求方式

//在需要使用的地方进行文件的引用
import $H from "@/common/lib/request.js"
	export default {
		data() {
			return {
				addColor:0,
				id:"",  //用来存储数据的id
				department_data:[],  //用来存储左侧的数据
				reglist_data : [],  //用来存储右侧的数据
			}
		},
		onLoad() {
			// 初始化事件,调用后台数据获取到数据
			this.init()
		},
		methods: {
			changeList(index,id){
				this.addColor = index
				// console.log(index)
				this.id =id
				// console.log(id)
                //当用户点击之后，获取到点击的id，然后将该id传递给请求数据的函数。
				this.initi(id)
			},
			//封装get请求之后,进行数据的请求   这里虽然可以顺利请求到数据，但是觉得思路存在问题
			init() {
                //第一次数据请求的时候，不需要传递参数，然后获取到所有的请求的数据
				$H.get("/department").then((res) => {
					this.department_data = res.data
					console.log(res.data[0].id)
                //因为第一次的数据是默认显示的，所以在获取数据的时候，需要再次调用请求，将第一次的数据默认进行显示
					this.initi(res.data[0]._id)
				})
			},
            //这里通过id进行接收，方便后期传递参数的时候，进行简写。
			initi(id){
                //这是传递参数的请求方式，第二个传递的参数，需要以对象的形式进行传递
                //{id:id}  这里是可以进行简写 {id}
				$H.get("/reglist?id=", {id:id} ).then((res) => {
					this.reglist_data = res.data
					console.log(res)
				})
			}
		}
	}

这里是之前封装的request请求的两种使用方式，分别是简单的数据请求和带参数的数据请求，

希望对各位能够起到一定的作用，详细的封装过程请点击下方查看

request封装详解

后续会加上一个具体的例子，但是现在需要溜了溜了。