request 请求类封装
创始人
2024-04-18 17:14:49
0

一:前言:

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 awaitasync 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'},//请求返回 promiserequest(options = {} ){//组织参数options.url = this.common.baseurl + options.urloptions.header = options.header || this.common.headeroptions.data = options.data || this.common.dataoptions.method = options.method || this.common.methodoptions.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.msgres(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'},//请求返回 promiserequest(options = {} ){//组织参数options.url = this.common.baseurl + options.url//这里的header头部需要在验证token之后才可以进行使用options.header = options.header || this.common.headeroptions.data = options.data || this.common.dataoptions.method = options.method || this.common.methodoptions.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.msgres(data)},fail:(error) =>{uni.showToast({title:error.errMsg || '请求失败',icon:"none"});return rej()}})})},//get 请求get(url , data = {} , options = {}){options.url = urloptions.data = dataoptions.method = "GET"return this.request(options)},//post 请求post(url , data = {} , options = {}){options.url = urloptions.data = dataoptions.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){//初始化tabBarsthis.tabBars = data.categoryconsole.log(data.category)}},}

方式二:

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

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

上一篇:PHP+Nginx配置备忘

下一篇:JS 杂记

相关内容

热门资讯

激发暑期文旅消费新动能   内蒙古阿尔山,漫步国家森林公园,感受清凉夏日;甘肃敦煌,坐在鸣沙山上,听一场星空演唱会;江苏连云...
日股收跌0.19% 格隆汇7月11日|日经225指数收盘下跌76.68点,跌幅0.19%,报39569.68点。
遵义小伙跳水救人牺牲,年仅31... (转自:遵义晚报)7月8日下午6时,遵义市播州区出现感人一幕——尚嵇镇大坝社区全军坝组28岁的村民陈...
“小记者”走进河北省邯郸市食品... 中国质量新闻网讯 7月7日下午,河北省邯郸市食品药品检验中心(市食品药品安全科普基地)联合邯郸新闻传...
局地超42℃!下周河南持续高温... 大范围高温闷热天气强势来袭!12日起,西太平洋副热带高压将再次控制我省,受其影响,13日至20日我省...
毕市监处罚[2025]1021... 毕市监处罚[2025]1021号浏览:1次基本信息:处罚机关毕节市市场监督管理局处罚日期2025年0...
达势股份-达美乐中国以4D战略...   达势股份-达美乐中国("达美乐中国"或"达势股份"或"公司")(1405.HK)是达美乐比萨在中...
“向上取整”:变相“明抢” 转自:中国质量报□ 胡立彪近日,有媒体对快递行业称重计费问题进行测评,结果发现,被测评的8家快递企业...
以改革破局 盐城经开区多点突破... 中新网江苏新闻7月11日电(倪玲)改革是发展的根本动力,开放是进步的必由之路。近年来,盐城经开区将推...
中国代表强调国际刑事法院应依法... 转自:千龙网新华社联合国7月10日电 中国常驻联合国副代表孙磊10日在安理会审议国际刑事法院涉苏丹问...