微信小程序请求后台数据的基本用法,并改写为Promise用法 和 async/await用法。
1、基本用法:
wx.request({
url: '',
data: {},
header: {'content-type':'application/json'},
method: 'GET',
dataType: 'json',
responseType: 'text',
success: (result) => {
},
fail: () => {},
complete: () => {}
});
参数说明:
属性 | 类型 | 默认值 | 必填 | 说明 |
---|---|---|---|---|
url | string | 是 | 开发者服务器接口地址 | |
data | string/object/ArrayBuffer | 否 | 请求的参数 | |
header | Object | 否 | 设置请求的 header,header 中不能设置 Referer。content-type 默认为 application/json | |
method | string | GET | 否 | HTTP 请求方法 |
dataType | string | json | 否 | 返回的数据格式 |
responseType | string | text | 否 | 响应的数据类型 |
success | function | 否 | 接口调用成功的回调函数 | |
fail | function | 否 | 接口调用失败的回调函数 | |
complete | function | 否 | 接口调用结束的回调函数(调用成功、失败都会执行) |
更多属性请查看官方文档 。
2、简单使用:通过get方法获取后台数据(默认get方法)
wx.request({
url: 'https://xxx/data',
success: (result) => {
this.setData({
list: result.data.message
})
}
});
3、改写为Promise
export const request = (param)=>{
return new Promise((resolve,reject)=>{
wx.request({
...param,
success:(result)=>{
resolve(result);
},
fail:(err)=>{
reject(err);
}
})
})
}
发起请求:
import {request} from "../../request/index.js"; //引入
...
getList(){
request({url: 'https://xxx/data'})
.then((result)=>{
this.setData({
list: result.data.message
})
})
}
...
//调用
this.getList();
...
4、改写为async/await
export const request = async function(param){ //这里的async可加可不加
return new Promise((resolve,reject)=>{
wx.request({
...param,
success:(result)=>{
resolve(result);
},
fail:(err)=>{
reject(err);
}
})
})
}
发起请求:
import {request} from "../../request/index.js"; //引入
...
async getList(url, list){
let result = await request({url});
this.setData({
[list]: result.data.message
})
}
...
//调用
this.getList('https://xxx/data','floorList');
...