前言:
在开发微信小程序的时候请求接口获取数据一般会直接使用微信小程序提供的方法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);
}