【微信小程序】async-await 封装同步请求方法

前言:

在开发微信小程序的时候请求接口获取数据一般会直接使用微信小程序提供的方法wx.request({}),但是这个方法是异步请求的,在需求中不满足我们同步的要求,这个时候就需要自己去封装一个js方法,然后在需要使用的地方中引入js方法,可以直接使用async-await进行同步接口请求。

步骤:

1、在小程序项目中新建一个request文件夹,在文件中新建一个js文件,如下:
在这里插入图片描述

2、在index.js中封装post请求和get请求,如下:

//post请求
const postData =(url,params)=>{
  return new Promise((resolve,reject)=>{
    // 异步请求
    wx.request({
      // 解构
      // ...params,
      url:url,
      method:"POST",
      data:params,
      success:(result)=>{
        resolve(result.data);
      },
      fail:(err)=>{
        reject(err);
      }
    });
  })
}

//get请求
const getData =(url,params)=>{
  return new Promise((resolve,reject)=>{
    wx.request({
      // ...params,
      url: url,
      method:"GET",
      data:params,
      success:(result)=>{
        resolve(result.data);
      },
      fail:(err)=>{
        reject(err);
      }
    })
  })
}

export default{
  postData,
  getData
}

3、同步方法封装好了之后就可以在想要使用同步请求的方法中引入index.js文件,然后使用async-await和index.js文件中的方法进行同步请求了。
引入index.js的方法有两种:
(1)import {postData} from ‘…/…/request/index.js’
(2)const postData = require(’…/…/request/index.js’)
注意:此时你引入的postData表示的是index.js文件,这个js文件中会包含多个方法,需要通过postData.xxx的方式去调用你想要使用的方法。

xxx.js

//引入
const postData  = require('../../request/index.js')

//使用
Page({
  /**
   * 页面的初始数据
   */
  data: {
    list:[]
  },
  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (e) {
    this.getData();
  },
})
//获取数据方法
async getData(){ 
	let data = await postData.postData(url,params)
 	this.setData({ 
      list:res.data.list;
    })
	console.log(data); 
}

  • 0
    点赞
  • 8
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值