微信小程序发起网络请求

最新推荐文章于 2025-02-28 12:00:00 发布

原创最新推荐文章于 2025-02-28 12:00:00 发布 · 824 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#微信小程序 #请求数据 #wx.request #promise #async/await

小程序专栏收录该内容

2 篇文章

订阅专栏

本文详细介绍了微信小程序中如何使用wx.request方法请求后台数据，包括基本用法、参数说明及如何将请求方式改写为Promise和async/await，以便更高效地处理异步操作。

微信小程序请求后台数据的基本用法，并改写为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');
...