uni-app中调取接口的三种方式与封装uni.request()

这篇具有很好参考价值的文章主要介绍了uni-app中调取接口的三种方式与封装uni.request()。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

uni-app中调取接口的三种方式与封装uni.request()

一、uni-app中调取接口的三种方式

1、uni.request({})

uni.request({
	url:'/api/getIndexCarousel.jsp',
	method:'get',
	success:res=>{
		console.log(res.data);
		this.carouselData = res.data
	}
})

2、uni.request({}).then()

uni.request({
	url:'/api/getIndexCarousel.jsp',
	method:'get',
}).then((result)=>{
	let [error,res] = result;
	//result将返回一个数组[error,{NativeData}]
	//NativeData:调取接口后返回的原生数据
	if(res.statusCode === 200){
		this.carouselData = res.data
	}
	if(res.statusCode === 404){
		console.log('请求的接口没有找到');
	}
})

3、async/await

async:用在函数定义的前面
async request(){	//函数体;}
await:用在标明了async关键字的函数内部,异步操作的前面。
onLoad() {
	this.request();
},
methods: {
	async request(){
		let result = await uni.request({
			url:'/api/getIndexCarousel.jsp'
		})
		console.log(result)
		let [err,res] = result;
		if(res.statusCode === 200){
			this.carouselData = res.data;
		}
	}
}

二、封装uni.request();

1、创建一个对象,将该对象挂在Vue的原型下

新建@/common/request.js文件

初步写法(仅供参考):

export default {
	request(options){
		uni.request({
			...options,
			success:res=>{
				console.log(res)
			}
		})
	},
	get(url,data={},options={}){
		options.url=url,
		options.data=data,
		options.method='get',
		this.request(options)
	},
	post(url,data={},options={}){
		options.url=url,
		options.data=data,
		options.method='post',
		this.request(options)
	}
}

二次更改:

export default{
	//封装uni.request():
	request(options){
		return new Promise((resolve,reject)=>{
			//书写异步操作的代码
			uni.request({
				...options,
				success:res=>{
					if(options.native){
						resolve(res)	//调取接口后返回的原生数据	
					}
					if(res.statusCode === 200){
						resolve(res.data)	//异步操作执行成功
					}else{
						console.log('请求的接口没有找到');
						reject(res) 	//异步操作执行失败
					}
				}
			})
		})
	},
	get(url,data={},options={}){
		options.url=url;
		options.data=data;
		options.method='get';
		return this.request(options)
	},
	post(url,data={},options={}){
		options.url=url;
		options.data=data;
		options.method='post';
		return this.request(options)
	}

}

2、进入main.js文件

import request from '@/common/request.js';
Vue.prototype.$Z = request;

例:在任意文件中书写下列代码可以调用。this.$Z.get();

3、在页面中调用

//封装uni.request():
this.$Z.get('/api/getIndexCarousel.jsp',{},{
	native:false
}).then(res=>{
	//异步操作成功
	console.log(res)
}).catch(res=>{
	//异步操作失败
	console.log(res)
}).finally(res=>{
	//异步操作完成
});

uniapp的网络请求方法

CODE

1
2
3
4
5
6
7
8
9
10
11
12
13
uni.request({
    url: 'https://www.example.com/request', //仅为示例,并非真实接口地址。
    data: {
        name: 'name',
        age: 18
    },
    header: {
        'custom-header': 'hello' //自定义请求头信息
    },
    success: function (res) {
        console.log(res.data);
    }
});

uniapp网络请求的get和post

对于 GET 方法,会将数据转换为 query string。例如 { name: ‘name’, age: 18 } 转换后的结果是 name=name&age=18。
对于 POST 方法且 header[‘content-type’] 为 application/json 的数据,会进行 JSON 序列化。
对于 POST 方法且 header[‘content-type’] 为 application/x-www-form-urlencoded 的数据,会将数据转换为 query string。

请求的 header 中 content-type 默认为 application/json

注意 post请求必须加header[‘content-type’]

uni-app 封装接口request请求

我们知道一个项目中对于前期架构的搭建工作对于后期的制作有多么重要,所以不管做什么项目我们拿到需求后一定要认真的分析一下,要和产品以及后台沟通好,其中尤为重要的一个环节莫过于封装接口请求了。因为前期封装好了,后面我们真的可以实现粘贴复制了。所以今天小月博客给大家分享一个在uni-app中如何封装一个request请求。

第一步、根目录下新建 config.js 文件

const config = {
base_url: '这里可以是生产环境或者测试环境'
}
export { config }

这里主要配置接口的基本路径

第二步、根目录下新建 utils/http.js 文件

import {
	config
} from '../config.js'

export const apiResquest = (prams) => { //prams 为我们需要调用的接口API的参数 下面会贴具体代码

	// 判断请求类型
	let headerData = {
		'content-type': 'application/json'
	}

	let dataObj = null
        //因为我们的GET和POST请求结构不同这里我们做处理,大家根据自己后台接口所需结构灵活做调整吧
	if (prams.method === "GET") {
		headerData = {
			'content-type': 'application/json',
			'token': uni.getStorageSync('token')
		}
	} else {
		dataObj = {
			'data': prams.query,
			'token': uni.getStorageSync('token')
		}
	}
	return new Promise((resolve, reject) => {
		let url = config.base_url + prams.url; //请求的网络地址和局地的api地址组合
		uni.showLoading({
			title: '加载中',
			mask: true
		})
		return uni.request({
			url: url,
			data: dataObj,
			method: prams.method,
			header: headerData,
			success: (res) => {
				uni.hideLoading()
                                //这里是成功的返回码,大家根据自己的实际情况调整
				if (res.data.code !== '00000') {
					uni.showToast({
						title: '获取数据失败:' + res.data.msg,
						duration: 1000,
						icon: "none"
					})
					return;
				}
				resolve(res.data);
				console.log(res.data)
			},
			fail: (err) => {
				reject(err);
				console.log(err)
				uni.hideLoading()
			},
			complete: () => {
				console.log('请求完成')
				uni.hideLoading()
			}
		});
	})
}

第三步、 创建model 层 根目录下新建 models/index.js 文件

——-⚠️注意: 这里可以根据自己的项目功能需求分解models 层——-

import { apiResquest } from '../utils/http.js'

//POST 请求案例

export const login = (query) => {
	return apiResquest({
		url: '这里是API的地址',
		method: 'POST',
		query: {...query}
	})
}

//GET 请求案例可以传递参数也可以不传递
export const validateCode  = (query) => {
	let str = query
	return apiResquest({
		url: `您的API地址 ?${str}`,
		method: 'GET'
	})
}

第四步、页面中调用

import { login } from '../../models/index.js'
//页面中的 methods 里面就可以直接调用了
Login(){
        //这里可以设置需要传递的参数
	let uid = uni.getStorageSync('userId')
	login(uid).then((res) => {
		console.log(res)
	}).catch(err => {
		console.log(err)
	})
}

以上代码就是完整的接口封装了,真的超级实用,其实网上有很多关于uni-app接口封装的案例,但是个人感觉亲测了好几种,这种是最好用的。分享在这里希望和大家一起交流。

 文章来源地址https://www.toymoban.com/news/detail-491362.html

到了这里,关于uni-app中调取接口的三种方式与封装uni.request()的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • uni-app封装的request请求

    config.js    main.js 页面使用:

    2024年02月12日
    浏览(36)
  • uni-app/vue封装车牌选择器

    先看下效果如下: 代码如下: 父组件: 子组件:(代码较长,css部分没有提供)

    2024年01月18日
    浏览(51)
  • uni-app项目封装http请求和不封装请求

    在页面文件中 该请求的封装方式适用于_gt、_mt类型的请求,应该也可以做到其他类型; 注意看代码中的注释 在uilt/api.js中 在uilt/http.js中 在页面文件中 注意看代码中的注释;不封装需要使用 uni.request这个API来进行请求

    2024年02月13日
    浏览(51)
  • uni-app 封装 websocket 并且监听心跳机制

    新建 socket.js , 将以下代码复制进去 ,向外暴露。 在入口文件中 将 socketIO 挂载在 Vue 原型上 , 也可以按需引入置顶页面 。 在需要用到webSocket的页面中使用如下方法(可根据自身业务需求进行整改) 离开页面,记得断开连接。

    2024年02月11日
    浏览(44)
  • C语言中函数宏的三种封装方式详解

      目录 ​编辑 1. 函数宏介绍 3. do{...}while(0) 方式 4. ({}) 方式 5. 总结 函数宏,即包含多条语句的宏定义,其通常为某一被频繁调用的功能的语句封装,且不想通过函数方式封装来降低额外的弹栈压栈开销。 函数宏本质上为宏,可以直接进行定义,例如: 但上述的宏具有一

    2024年02月02日
    浏览(48)
  • uni-app封装省市区下拉组件(后台获取数据)

    一.后台数据格式  PROCINCE:[{itemName:\\\'\\\',itemValue:\\\'\\\'}] CITY:[{itemName:\\\'\\\',itemValue}] AREA:[{itemName:\\\'\\\',itemValue}] 前端将地址数据缓存在了pinia中 前端主要使用picker进行勾选 二.代码

    2024年02月12日
    浏览(50)
  • uni-app 微信小程序蓝牙模块的解耦封装-持续更新

    core.js tool.js util.js main.js

    2024年03月27日
    浏览(94)
  • uni-app 使用uni.request封装发送api请求文档服务器请求导航守卫

    前言 刚刚接触uni-app时候想着直接使用axios发请求,可以发送成功但是请求头有点问题 后面发现教程都是使用@escookrequest-miniprogram三方包发送请求-(浏览器环境发送不了请求,不兼容) 为什么不直接用uni.request()发送请求,是因为每次请求都要写一次添加请求头不合理 后面

    2024年02月16日
    浏览(57)
  • uni-app - 实现监听路由跳转,每次跳转的时候都能触发的事件(当页面路由发生变化时,触发一个封装好的请求接口或普通功能函数)全端兼容,高效简洁无 BUG 详细教程

    当用户点击任意页面时(路由发生变化),自动执行一个函数,调用接口请求数据、做任何事情。 由于涉及到全部页面,必须采用统一的入口和统一的执行函数,不可能一个页面写一次!! 基于这个需求,本文实现了 全局统一监听路由跳转,当页面发生变化时自动触发某个

    2024年02月11日
    浏览(85)
  • uni-app封装request请求及get、post、put等方法

    直接上代码 request.js文件 export default {   common: {     baseUrl: \\\"http://172.20.4.212:3000/api\\\",     data: {},     header: {       \\\"Content-Type\\\": \\\"application/json\\\",       \\\"Content-Type\\\": \\\"application/x-www-form-urlencoded\\\"     },     method: \\\"GET\\\",     dataType: \\\"json\\\"   },   request (options = {}) {     uni.showLoading({  

    2024年02月09日
    浏览(42)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包