uniapp里的mounted_uni-app数据请求封装

旧城等待， 2022-10-28 03:45 515阅读 0赞

uni-app数据请求封装

1.开发环境 uni-app

2.电脑系统 windows10专业版

3.在使用uni-app开发的过程中,我们会使用到数据请求,下面我来分享一下,uni-app数据请求封装,希望对你有所帮助!

4.和pages同级新增一个目录,名字自己定义,在这里我的名字是 chenhttp在这个文件下面新建一个 chenhttp.js,代码如下:

const BASE\_URL='http://192.168.137.78:3000'; //后台接口地址

export const myRequest=(options)=>\{

return new Promise((resolve,reject)=>\{

uni.request(\{

url:BASE\_URL+options.url,

method:options.method || 'GET', //配置请求方法,默认为 get请求

data:options.data || \{\},

success:(res)=>\{

if(res.data.statusCode ==0)\{

return uni.showToast(\{

title:'获取数据失败'

\})

\}

resolve(res)

\},

fail:(err)=>\{

uni.showToast(\{

title:'请求接口失败'

\})

reject(err)

\}

\})

\})

\}

5.为了方便使用,我们把这个方法挂载到全局,在main.js中添加如下代码:

import \{myRequest\} from 'chenhttp/chenhttp.js';

Vue.prototype.$myRequest=myRequest;

6.在uni-app模板中使用,在methods中添加如下代码:

async chenget()\{

const res=await this.$myRequest(\{

url:'/feng', //请求的接口

method:'post', //请求方法

data:this.ChenindexconOnj //传递的参数

\})

console.log(res); //输出请求的数据

\}

7.在mounted 进行调用,添加如下代码:

this.chenget();

8.效果如下:

![f0f4fe1771be9193a7c3a26396ab2a44.png][]

9.后台接受的参数,效果为:

![0a6c556e73341b76b556841ef8e80bf9.png][]

10.本期的分享到了这里就结束啦,是不是很nice,希望对你有所帮助,让我们一起努力走向巅峰!

[f0f4fe1771be9193a7c3a26396ab2a44.png]: /images/20221024/64d71f1a7f8847558ea0e21d72d03197.png
[0a6c556e73341b76b556841ef8e80bf9.png]: /images/20221024/a3db99fc5c4345d6a1fcad0160d75d08.png

发表评论取消回复

表情：

评论列表（有 0 条评论，515人围观）

还没有评论，来说两句吧...

相关阅读

相关 uniapp的request.js请求封装

request.js const baseUrl = getApp().globalData.baseURL import utils from './u

末蓝、/ 2022年12月28日 04:25/ 0 赞/ 329 阅读

相关 uniapp封装网络请求(post+token)

先看代码，复制使用即可，一共三个步骤，具体使用方式下文将清楚罗列，任何新手都可以轻松了解和使用。同时您将为此省下很多宝贵时间。下面是请求的封装,您需要在根目录下新建`G

一时失言乱红尘/ 2022年11月29日 00:51/ 0 赞/ 597 阅读

相关 uniapp里的mounted_uni-app数据请求封装

uni-app数据请求封装 1.开发环境 uni-app 2.电脑系统 windows10专业版 3.在使用uni-app开发的过程中,我们会使用到数据请求,下面我来分享

旧城等待，/ 2022年10月28日 03:45/ 0 赞/ 516 阅读

相关 uniapp封装request请求

步骤如下： 1、项目下新建common文件夹，再创建request.js文件 ![777c8043f1259002e7f925313ffa12aa.png][] 2、打

忘是亡心i/ 2022年10月12日 15:00/ 0 赞/ 271 阅读

相关 uniapp封装request请求

步骤如下： 1、项目下新建common文件夹，再创建request.js文件 ![777c8043f1259002e7f925313ffa12aa.png][] 2、打开

今天药忘吃喽~/ 2022年10月11日 00:45/ 0 赞/ 255 阅读

相关 uniapp 数据网络请求封装以及通用使用

index.js import http from './interface' / 将业务所有接口统一起来便于维护如果

缺乏、安全感/ 2021年09月19日 13:48/ 0 赞/ 738 阅读

相关 uniapp 数据请求封装以及通用使用

import urlConfig from './config.js' const request = {} const headers =

川长思鸟来/ 2021年09月17日 23:30/ 0 赞/ 518 阅读

相关 uniapp unirequest 网络请求封装

import urlConfig from './config.js' const request = {} const headers

╰半橙微兮°/ 2021年09月17日 22:36/ 0 赞/ 526 阅读

相关 uniapp 公共方法封装公共请求封装

一般我都习惯把公共js封装到util这个文件夹下常见的的方法，手机号验证，邮箱验证等方法我都会写到util下的util.js里目录： ![20201117155628

男娘i/ 2021年07月24日 20:05/ 0 赞/ 1518 阅读

相关 uniapp自己封装请求拦截

request.js export function packRequest(obj){ let { url, method, params, da

Love The Way You Lie/ 2021年07月24日 17:13/ 0 赞/ 918 阅读