循环调用接口拿到值之后再执行下一步操作;Promise.all处理。

循环调用接口拿到值之后再执行下一步操作;Promise.all处理。

需求是小程序上传图片只允许单个上传,多图需循环调用upload,后面的表单提交依赖第三方图片库链接。
在这里插入图片描述
大概用在表单附带图片提交比较多,具体看实现:

	//this.fileList 已选择文件的列表
	const files = this.fileList.map(item => this.uploadFiles(item))
	//这里用Promise.all来聚合多个异步任务的结果
	const urls = await Promise.all(files)
	//下面进行提交操作
	//......

接下来是上传部分,return一个Promise并通过resolve返回当前上传后的图片链接:

uploadFiles(item) {
		return new Promise((resolve, rejects) => {
				uni.uploadFile({
						url: '接口地址',
						filePath: item.path, //图片路径
						name: 'multipartFile',
						// formData: data,
						header: {
							"token": uni.getStorageSync("token"),
							"Content-Type": "multipart/form-data"
					},
						success: (res) => {
							//file为后端返回图片地址
							let url = JSON.parse(res.data).data
							resolve(url) //处理file
					}
				})
			})
	},

我觉得这种等待循环调用接口的地方都适合这个处理方式,大佬们出手吧,还有没有其他的解决方法。

  • 0
    点赞
  • 5
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
在Vue中,要实现点击按钮调用接口并在返回数据后再执行一步操作,可以按照以下步骤进行: 1. 首先,在Vue组件的methods中定义一个方法,用于处理点击按钮事件。例如: ``` methods: { handleClick() { // 调用接口的代码 } } ``` 2. 接下来,使用Vue提供的axios或者fetch等库来发送请求,调用接口获取数据。这里以axios为例: ``` import axios from 'axios'; methods: { async handleClick() { try { const response = await axios.get('接口地址'); const data = response.data; // 获取返回的数据 // 执行一步操作 } catch (error) { console.log(error); } } } ``` 3. 在获取到数据后,可以根据需要进行下一步操作。可以将数据保存到Vue的data中,更新页面的显示,或者进行其他逻辑操作。 例如,将数据保存到data中: ``` data() { return { responseData: null // 初始化responseData为null } }, methods: { async handleClick() { try { const response = await axios.get('接口地址'); this.responseData = response.data; // 将返回的数据保存到responseData中 // 执行一步操作 } catch (error) { console.log(error); } } } ``` 4. 在Vue模板中,可以通过v-on指令将按钮的点击事件与定义的方法绑定,点击按钮时即可调用接口执行一步操作。 ``` <button @click="handleClick">点击按钮</button> ``` 以上就是在Vue中实现点击按钮调用接口,返回数据后再执行一步操作的基本过程。通过定义相应的方法,使用axios等库发送请求获取数据,并根据需要进行下一步操作

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值