小程序接口封装、异步加载、Promise

已于 2023-02-14 10:32:29 修改
阅读量790 收藏 1
点赞数
分类专栏： 微信小程序学习笔记 文章标签： Promise 小程序 接口封装 async await
于 2023-02-14 10:26:31 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_39109182/article/details/129011681
版权

目录

1、页面准备

2、在app.js中处理当前环境以便切换api的环境、公共变量

3、定义post、get请求方法 request.js

4、api.js 接口列表调用index.js的post、get请求

5、index.js 需要返回数据的页面

api.js 、index.js 示例

异步实现 async、await

1、页面准备

目录结构：pages > index       与pages同级 utils > request.js、api.js

①页面index.js

②封装的post、get请求方法request.js

③接口请求列表 api.js（相同业务模块下的api可以统一整理到一个js中，方便管理修改等，也可不放同一个js中）

2、在app.js中处理当前环境以便切换api的环境、公共变量

// app.js
  //定义环境变量，和 api域名
  let env, apiUrl = 'https://appapi.5i5j.com';
  if (typeof __wxConfig === 'object') {
    let version = __wxConfig.envVersion;
    if (version === 'develop') {//开发版
      env = 'dev';
    } else if (version === 'trial') {//体验版 
      env = 'trial';
    } else { //生产
      env = 'release';
    }
  }
  //通过环境变量判断当前域名环境
  // apiUrl = env == 'release' ? '生产环境api' : '联调环境api';
  apiUrl = env == 'release' ? 'https://xxx.com' : 'https://xxx-test.com';
  console.log('当前环境：',env)

App({
  onLaunch() {
  },
  globalData: { //全局变量
    hostUrl:apiUrl, //api域名
    cityid:1 //接口上需要的城市
  }
})

3、定义post、get请求方法 request.js

//request.js
/***
 * POST请求
 * @param url 接口地址
 * @param data 请求参数
 * @param config 设置请求头
 */
export const post = (url, data = {}, config = {}) => {
  return new Promise((resolve, reject) => {
    wx.request({
      url,
      data,
      ...config,
      method: "POST",
      success: res => resolve(res),
      fail: err => reject(err)
    })
  })
}
/***
 * GET请求
 * @param url 接口地址
 * @param data 请求参数
 * @param config 设置请求头
 */
export const get = (url, data = {}, config = {}) => {
  return new Promise((resolve, reject) => {
    wx.request({
      url: url + parmasFormat(data),
      ...config,
      method: "GET",
      success: res => resolve(res),
      fail: err => reject(err)
    })
  })
}
/***
 * 处理GET请求地址拼接 
 * @param obj 请求的参数对象
 * @param 如 {a:1,b:2} 返回?a=1&b=2
 */
export const parmasFormat = (obj) => {
  let paramsStr = ""
  Object.keys(obj).forEach((key, index) => {
    paramsStr += (index === 0 ? '?' : '&') + key + '=' + (obj[key] ?? '')
  })
  return paramsStr
}

4、api.js 接口列表调用index.js的post、get请求

// api.js

//引入request.js 中的 POST、GET请求
import { post , get } from "./request"

const app = getApp()//获取App()的实例
const { globalData } = app //获取全局变量
const { hostUrl ,cityid } = globalData //获取api域名和城市 ，如果有多个可以这样分开写 ，如果只有一个可以和上一行写一起

/***
 * POST请求
 * @param hostUrl app.js中的接口域名
 * @param data 需要的参数
 * 1、请求头不需要传特殊参数
 */
export const postTest1 = data => post(
  hostUrl + `接口地址` ,
  data,
  {
    header: { 'Content-Type': 'application/x-www-form-urlencoded;charset=utf-8'},
  }
)

/***
 * POST请求
 * @param hostUrl app.js中的接口域名
 * @param data 需要的参数
 * @param config 设置的header参数
 * 2、请求头需要传特殊参数
 */
export const postTest2 = (data,config) => post(
  hostUrl + `接口地址` ,
  data,
  config
)

/***
 * GET请求
 * @param hostUrl app.js中的接口域名
 * @param params 接口需要的参数
 * 1、请求头需要传特殊参数
 */
export const getTest= (params) => get(hostUrl + "接口地址", 参数对象)
/***
 * GET请求
 * @param hostUrl app.js中的接口域名
 * @param params 接口需要的参数
 * @param config 设置的header参数
 * 2、请求头需要传特殊参数
 */
export const getTest2 = (params,config) => get(hostUrl + "接口地址", 参数对象,设置的header)

5、index.js 需要返回数据的页面

// index.js
// 获取应用实例
const app = getApp()

//导入api请求列表  { 这里面的值对应的是 api 中的 postTest1：不单独设置header postTest2:单独设置header}
//import { 这里对应api里定义好的请求，用哪个写哪个，不需要的可以不写} from "../../utils/api"
import { postTest1 , postTest2, getTest,getTest2} from "../../utils/api"

Page({

  data: { },
  onLoad() { 
    //请求参数
    let params = {
		参数名1:值,
		参数名2:值
    }
    //设置请求头
    let headers= {
	    header:{
		    'Content-Type': 'application/x-www-form-urlencoded;charset=utf-8', 
		    'deviceid': '设备id',
	    }
    }

    //header 里不需要单独在设置特别参数
	postTest1(params).then(res => {
      if(res.statusCode == '200'){
        console.log('success',res)
      }else{
        console.log('error',res)
      }
    })
    //设置请求头的请求
	postTest1(params,headers).then(res => {
      if(res.statusCode == '200'){
        console.log('success',res)
      }else{
        console.log('error',res)
      }
    })
    //get 不设置header
    getTest(params).then(res =>{
      console.log('success',res)
    }).catch((err) => {
      console.log('err',err)
    })

    //get 设置header
    getTest2(params,headers).then(res =>{
      console.log('success',res)
    }).catch((err) => {
      console.log('err',err)
    })

  }

})

api.js 、index.js 示例

// api.js

//引入request.js 中的 POST、GET请求
import { post , get } from "./request"

const app = getApp()//获取App()的实例
const { globalData } = app //获取全局变量
const { hostUrl ,cityid } = globalData //获取api域名和城市 ，如果有多个可以这样分开写 ，如果只有一个可以和上一行写一起

/***
 * POST请求  例如1
 * @param hostUrl app.js中的接口域名
 * @param data  接口需要的参数
 * 1、请求头不需要传特殊参数
 */
export const post1 = data => post(
  hostUrl + `/brokering/${cityid}/v1/brokerlist` ,
  data,
  {
    header: { 'Content-Type': 'application/x-www-form-urlencoded;charset=utf-8'},
  }
)

/***
 * POST请求 例如2
 * @param hostUrl app.js中的接口域名
 * @param data 接口需要的参数
 * @param config 设置的header参数
 * 2、请求头需要传特殊参数
 */
export const post2 = (data,config) => post(
  hostUrl + `/appapi/renting/${cityid}/v1/list` ,
  data,
  config
)


/***
 * GET请求  例如3
 * @param hostUrl app.js中的接口域名
 * @param params 接口需要的参数
 * 1、请求头不需要传特殊参数
 */
export const get1 = (params) => get(hostUrl + "/appapi/sale/v2/recommend/index", params)

/***
 * GET请求  例如4
 * @param hostUrl app.js中的接口域名
 * @param params 接口需要的参数
 * @param config 设置的header参数
 * 2、请求头需要传特殊参数
 */
export const get1 = (params,config) => get(hostUrl + "/appapi/sale/v2/recommend/index", params,config)

// index.js
// 获取应用实例
const app = getApp()

import { post1 , post2 ,get1 ,get2 } from "../../utils/api"

Page({
  data: { },
  onLoad() { 
    let params = {
      cityid:1,
      communityid:200013141
    }
    let headers= {
      header:{
        'Content-Type': 'application/x-www-form-urlencoded;charset=utf-8', 
        'deviceid': '123',
      }
    }
    post1(params).then(res => {
      if(res.statusCode == '200'){
        if(res.data.status == '200'){
          console.log('res',res.data.data)
        }
      }else{
        console.log(res.data.msg)
      }
    })
    
    post2(params,headers).then(res => {
      if(res.statusCode == '200'){
        if(res.data.status == '200'){
          console.log('listHouse,res',res)
        }
      }else{
        console.log(res.data.msg)
      }
    })

    get1(params).then(res =>{
      console.log('res2',res)
    }).catch((err) => {
      console.log(err)
    })

    get2(params,headers).then(res =>{
      console.log('res3',res)
    }).catch((err) => {
      console.log(err)
    })
  },
})

异步实现 async、await

onLoad: async function (options) {
    let params = {
      cityid:1,
      communityid:200013141
    }
    await list(params).then(res => {
      if(res.statusCode == '200'){
        if(res.data.status == '200'){
          console.log('res',res)
        }
      }else{
        console.log(res.data.msg)
      }
    })

}

闲来无事垂钓
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
微信小程序 — 异步加载echarts
weixin_42059109的博客
08-06 973
微信小程序 — 异步加载echarts 引入echarts 基本用法请参考： ​ echarts文档 — 在微信小程序中使用 异步加载 很多时候，我们更多需要的是请求到数据后，更具数据来渲染图标，这个时候就需要使用异步加载(懒加载) wxml <ec-canvas canvas-id="vod" ec="{{ vodec }}" id="vod-dom-bar"></ec-canvas> js ... data:{ vodec: { lazyLoad:
小程序 ajax 加载,小程序实战-小程序网络请求异步加载
weixin_32899267的博客
08-05 245
最初看到小程序的网络请求的时候,尤其是演示示例中，userInfoReadyCallback这个函数更是一头雾水。其实并不怎么理解.一直很费解.网上各路大侠都有解释，但是就是，不知道是怎么个顺序,而我也是个对程序执行流程很关注的人,现在把我的心得分享给大家.如有理解偏差,还希望各位大侠指教. 以下代码为小程序快速创建项目的代码,里面也有相关的解释,我把一些咱们不用的去掉,重点我们看网络请求这里。A...
微信小程序开发中的异步加载和延迟加载
最新发布
2401_85625565的博客
06-18 615
通过异步加载可以提高小程序的响应速度和效率，通过延迟加载可以减少初始加载的资源量和提高页面的加载速度。微信小程序开发中的异步加载和延迟加载内容是指在小程序运行过程中，可以通过异步加载和延迟加载的方式，实现在需要的时候才加载相应的内容，从而提高小程序的性能和用户体验。异步加载的原理 异步加载主要依赖于 JavaScript 的回调函数和异步函数的特性。一、异步加载 异步加载是指在小程序运行过程中，可以通过异步方式加载一些耗时的操作或内容，从而不会阻塞主线程，提高小程序的响应速度和性能。
微信小程序中关于异步接口
qq_41736774的博客
02-12 1572
今天也是写微信小程序的一天，真真切切的体会到了什么叫做异步。之前写其他代码，从来没考虑过什么异步，同步的，也基本不用不到。而在微信小程序中不得不考虑了
echarts小程序异步加载
weixin_45885731的博客
08-12 506
如何实现异步加载？ 第一步：创建option 方法 设置好样式后 返回option，异步的值可以通过传参的方法传入option。 第二步：向后段请求数据，当请求完毕后用setData方法保存数据 // 折线图图表 let tableChart = null;//在page外定义一个全局的变量 getData () { this.data.timeList = []; this.data.valueList = []; wx.request({ ...
微信小程序——解决异步问题
TianXuab的博客
09-11 3819
这些是解决小程序异步请求的一些常见方法。具体的解决方案取决于你的项目需求和个人偏好。无论哪种方法，都需要注意处理成功和失败的情况，以确保你的小程序在网络请求方面具有良好的稳定性和用户体验。在小程序中，异步请求通常是通过使用微信小程序提供的API来实现的，最常见的是使用wx.request()函数来发送异步网络请求。
微信小程序（es6 promise封装）
06-08
在本项目中，开发者对微信小程序的内置API进行了Promise化封装，以便更方便地处理异步流程。 首先，我们来理解Promise的基本概念。Promise代表一个可能还没有完成（或永远无法完成）的异步操作的结果。它有三种状态...
微信小程序 引入es6 promise
08-30
引入并封装Promise到微信小程序后，我们可以更有效地管理和组织异步代码，避免回调地狱，提高代码的可读性和可维护性。通过将微信API与Promise结合，我们可以更灵活地处理网络请求和其他异步任务，同时利用`finally...
微信小程序-微信小程序的功能封装
08-06
2. **音乐播放器(Music Player)**：微信小程序支持集成音乐播放功能，通过`wx.createInnerAudioContext`接口可以创建一个音频上下文对象，用于播放、暂停、控制音量等操作。例如，设置自动播放、监听播放状态、调整...
微信小程序网络层封装的实现（promise, 登录锁）
10-17
总的来说，微信小程序网络层的封装通过Promise实现了更优雅的异步处理，而登录锁策略则解决了高并发场景下登录与接口请求同步问题，提升了用户体验。这两种技术的结合，使得小程序的网络请求更加高效和顺畅。在实际...
微信小程序网络请求---提示框---加载框等封装.zip
07-24
本项目"微信小程序网络请求---提示框---加载框等封装.zip"提供了一个高效的解决方案，将常用API进行了封装，并引入了Promise对象，使得异步操作更加简洁、易于管理。下面我们将详细探讨其中涉及的技术点。 首先，...
接口回调之异步网络加载
07-27
接口回调之异步网络加载
不到1KB的小程序异步接口Promise化
08-10
不到 1KB 的小程序异步接口 Promise 化，支持所有小程序异步接口
微信小程序 异步加载f2图表
Yao_June的博客
03-21 1292
微信小程序版本：2.8.1 wx-f2 版本：27 Aug 2020 数据库：微信云开发 刚开始入手小程序的时候，需要做一些图表，去对比了很多不同的小程序开源图表，还是觉得F2看着最舒服，只是F2的文档不够完善，让人头大。 官方文档给出的F2加载示例是直接使用了现成数据，但实际上我们在运行小程序过程中，经常需要先从数据库里查询数据，再加载图表，这里就涉及到异步加载的问题。 那么具体怎么解决呢，我这里结合微信云开发为例： 首先在js文件的data里设置 data: { showRoseCh.
微信小程序promise接口封装
liang_xiao_yuan的博客
10-09 439
微信小程序（其他小程序），发送请求简单，但在一个成十上百个小程序文件的项目中，我们每一个小程序文件都要写 wx.request岂不是很麻烦？后期的维护也不方便，所以我们要对 wx.request进行进一步的封装 第一步： 首先我们先创建一个http文件夹，然后里面再建三个小文件夹，分别为env.js, api.js, request.js。 第二步： 编辑env.js文件内容： 分开环境，方便切换环境。 module.exports = { // 开发环境 dev: { .
小程序异步处理
Huang_John的博客
11-22 5481
微信小程序很多逻辑都是同步处理，在执行上一个操作的时候后面的操作方式已经在同步执行了，会出现逻辑混乱的情况，这边简单介绍两种异步处理的方式: 第一种，promise处理方式，语法如下： let promise1 = new Promise(function (resolve, reject) { //这里填写需要执行的方法 }) let promise2 = new Pr...
小程序开发之异步调用
luoyoupp的博客
07-22 336
其中app.globalData.linkUrl是在app.js定义的一个全局变量: 在其他文件引用app.js中的全局变量是需要在调用数据前定义app:
微信小程序async异步请求怎么封装promise对象
06-04
可以通过封装一个 Promise 对象来实现微信小程序中的 async 异步请求。 以下是一个简单的封装示例： ```javascript function request(url, method, data) { return new Promise((resolve, reject) => { wx....
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值