微信小程序发起网络请求

tech2022-12-05  92

微信小程序请求后台数据的基本用法,并改写为Promise用法 和 async/await用法。

1、基本用法:

wx.request({ url: '', data: {}, header: {'content-type':'application/json'}, method: 'GET', dataType: 'json', responseType: 'text', success: (result) => { }, fail: () => {}, complete: () => {} });

参数说明: 

属性类型默认值必填说明urlstring 是开发者服务器接口地址datastring/object/ArrayBuffer 否请求的参数headerObject 否设置请求的 header,header 中不能设置 Referer。content-type 默认为 application/jsonmethodstringGET否HTTP 请求方法dataTypestringjson否返回的数据格式responseTypestringtext否响应的数据类型successfunction 否接口调用成功的回调函数failfunction 否接口调用失败的回调函数completefunction 否接口调用结束的回调函数(调用成功、失败都会执行)

更多属性请查看官方文档 。

 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'); ...

 

最新回复(0)