一：前言：

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验证之后，对其封装进行对应的补充