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 杂记

相关内容

热门资讯

再被捕后首次传唤调查 尹锡悦预... 11日,总台记者获悉,韩国前总统尹锡悦将不出席内乱特检组在其被拘捕后进行的首次传唤调查。△当地时间7...
湘邮科技涨2.32%,成交额1... 7月11日,湘邮科技盘中上涨2.32%,截至13:06,报19.37元/股,成交1.73亿元,换手率...
若再次执教中国队如何进世界杯,... 新京报讯(记者张建林)“屏幕上的这张照片不太好,让我看上去很显老。我才80多岁呢。”曾带领中国男足第...
券商股因何接过领涨大旗?业绩向...   券商上半年业绩预报陆续出炉。值得一提的是,7月11日上午,A股券商板块也接过领涨大旗,不仅如此,...
恒宝股份2025年7月11日涨... 2025年7月11日,恒宝股份(维权)(sz002104)触及涨停,涨停价24.02元,涨幅9.52...
数智赋能原料管理提质减负 转自:新华财经“数智赋能”不仅是技术手段的升级,更是成本管控理念的革新。近年来,江苏中烟工业有限责任...
水利部长江水利委员会汉江集团党... 转自:中国水利据中央纪委国家监委驻水利部纪检监察组、湖北省纪委监委消息:水利部长江水利委员会汉江集团...
为涉黑母亲辩护的法官涉嫌洗钱罪... 转自:今晚报 【#为涉黑母亲辩护的法官涉嫌洗钱罪被拘#】...
如何在正常估值期坚持投资策略 (转自:ETF炼金师)  在当前市场环境中,投资者常常面临着估值不高不低、收益平平的局面,许多人在投...
视频曝光!致我国公民6人死亡!... 转自:央视财经记者今天(11日)从广东省人民检察院获悉,近日,广东省深圳市人民检察院经依法审查,对长...