uni-app 调用接口封装文档

爱被打了一巴掌 2022-09-14 11:24 147阅读 0赞

1.创建 util 文件夹 ，并在文件夹中创建 api.js

const BASE_URL = 'http://localhost:8082'  // 域名头
    export const myRequest = (options)=>{ 
    	return new Promise((resolve,reject)=>{ 
    		uni.request({ 
    			url:BASE_URL+options.url,
    			method: options.method || 'GET',
    			data: options.data || { },
    			success: (res)=>{ 
    				if(res.data.status !== 0) { 
    					return uni.showToast({ 
    						title: '获取数据失败'
    					})
    				}
    				resolve(res)
    			},
    			fail: (err)=>{ 
    				uni.showToast({ 
    					title: '请求接口失败'
    				})
    				reject(err)
    			}
    		})
    	})
    }

2.在main.js 中进行全局设置

import Vue from 'vue'
    import {  myRequest } from './util/api.js'
    Vue.prototype.$myRuquest = myRequest //保存在 VUE 的原型中

3.接口调用结果

onLoad() { 
    	this.getSwipers()
    },
    methods: { 
    	// 获取轮播图的数据
    	async getSwipers () { 
    		const res = await this.$myRuquest({ 
    				url: '/api/getlunbo'
    		})
    		this.swipers = res.data.message  // 过去接口调用后的数据
    	},
    }

发表评论取消回复

表情：

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

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

相关阅读

相关 uniapp接口请求api封装，规范化调用

封装规范和vue中的差不多，都是统一封装成一个request对象，然后在api.js里面调用。先创建一个utils文件夹，然后里面创建一个request.js，代码如下：

忘是亡心i/ 2024年02月20日 08:47/ 0 赞/ 46 阅读

相关 UniApp Api接口封装

全局注册，通过this调用适用于vue 跟 uniapp > 在uniapp 下 > 跟pages同级下 > 创建一个api文件夹下 > 在创建一个http

分手后的思念是犯贱/ 2022年12月25日 15:52/ 0 赞/ 295 阅读

相关 python封装和调用_python + requests 接口测试，封装和调用

参照：https://www.cnblogs.com/du-hong/p/10860516.html 1、在接口测试中，有些接口经常会被用到比如登录的接口，这时候我们可以每个

深碍√TFBOYSˉ_/ 2022年10月27日 14:56/ 0 赞/ 195 阅读

相关 uniapp封装request请求

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

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

相关 uni-app 调用接口封装文档

1.创建 util 文件夹，并在文件夹中创建 api.js const BASE_URL = 'http://localhost:8082' // 域名头

爱被打了一巴掌/ 2022年09月14日 11:24/ 0 赞/ 148 阅读

相关微信开发接口封装调用

我们知道微信公众号开发主要就是调用微信官方开放给我们的一些接口。这里就不再一个一个接口的示例了，我直接把自己封装好的一个微信接口类展示一下，可以直接套用。后续会不断完善。 1

川长思鸟来/ 2022年06月10日 09:47/ 0 赞/ 256 阅读

相关 uniapp网络请求封装；小程序请求接口封装；uni.request接口封装

[另一篇全面封装文章][Link 1] [资源文章下载地址][Link 2] 1.正常使用uni.request()发送请求(未封装) get() {

淩亂°似流年/ 2021年09月07日 06:19/ 0 赞/ 1564 阅读

相关 vue.js、uniapp两种封装接口请求方法

前言：分别有两种封装方法适用于vue.js和uniapp；第一种：全局注册，通过this调用，不需要import引入js文件。第二种：需要请求接口的页面还要import一下。

超、凢脫俗/ 2021年07月24日 19:03/ 0 赞/ 1368 阅读

相关 uniapp接口请求封装api(超简单)

最下面有使用方法 const commoneUrl = "http://192.168..."; //公共路径 const userId =

ゝ一世哀愁。/ 2021年07月24日 14:56/ 0 赞/ 4048 阅读

相关 uniapp接口封装和使用

新建util文件夹，当前目录下新建api.js，代码为下 const BASE_URL = 'http://192.168.110.188:8001' /

- 日理万妓/ 2021年07月24日 12:03/ 0 赞/ 598 阅读