关于javascript:微信小程序异步请求封装方案

1. 应用 callback

1.config.js 定义配置信息

申请的通用信息

const config = {
  appkey:'zCr1cdeqweq',
  apiBaseUrl:'http://localhost:5300'
}

export {config}

2. 在 utils 包中定义 http.js

import {config} from '../config/config'

class Http {static request({url, data, callback, method='GET'}){
        wx.request({url:`${config.apiBaseUrl}${url}`,
            data,
            header:{appkey:config.appkey},
            success:res=>{callback(res.data) // 应用回调函数将数据传出去
            }
        })
    }
}

3. 在 model 包中定义 theme.js (业务对象)

import {Http} from '../utils/http';

class Theme{
    // 获取首页 LocationA
    static getHomeLocationA(callback){
        Http.request({
            url:`/theme`,
            data:{name:'t-1',// 申请的参数},
            callback:data=>{callback(data) // 回调函数中嵌套回调函数
            }
        })
    }
}

4. 在 home.js 调用

import {Theme} from '../../model/theme'

onLoad: function (options) {
    Theme.getHomeLocationA(data=>{
      this.setData({topTheme:data[0]
      })
    })
  },
  
  

剖析可知 应用 callback 函数会呈现函数嵌套

2. 应用 Promise

1. 应用 Promise 封装 Http.js

import {config} from '../config/config'

class Http{static request({url, data, method='GRT'}){return new Promise((resolve,reject)=>{
            wx.request({url: `${config.apiBaseUrl}${url}`,
                data,
                method,
                header: {appkey: config.appkey},
                success:res=>{resolve(res.data);
                },
                fail:err=>{reject(err)
                }
            })
        })
    }
}

2. 改写 theme.js

import {Http} from '../utils/http';

class Theme {static  getHomeLocationA(params) {
    return Http.request({
       url: `/themes`,
       data: {names: params}
     })
   }
}

3.home.js

onLoad: function (options) {Theme.getHomeLocationA('t-1').then((data)=>{
      this.setData({topTheme:data[0]
      })
    })
}

3. 终级解决方案 async await

为了解决大量简单不易读的 Promise 异步的问题，才呈现的改良版

async 必须申明的是一个 function

async 申明的函数的返回实质上是一个 Promise。

await 是在期待一个 Promise 的异步返回

1. 将小程序内置非 promise API 转化为 Promise 申请

const promisic = function(func) {return function(params= {}) {return new Promise((resolve,reject)=> {
            
            const args = Object.assign(params,{
                success:res=>{resolve(res)
                },
                fail:err=>{reject(err)
                }
            })
            func(args);
        })
    }
    
}

export {promisic}

2. 改写 http.js

import {config} from '../config/config'
import {promisic} from './util'

class Http {static async request({url, data,  method = 'GET'}){return await promisic(wx.request)({url: `${config.apiBaseUrl}${url}`,
            data,
            method,
            header: {appkey: config.appkey},
        })
    }
}

export {Http}

3.theme.js

import {Http} from '../utils/http';

class Theme {static async getHomeLocationA() {
   const res =  await Http.request({
      url: `/themes`,
      data: {names: 't-1'}
    })
    return res.data
  }
  
}

export {Theme}

4.home.js

onLoad: async function (options) {const data =  await Theme.getHomeLocationA();
    this.setData({topTheme:data[0]
    })
},

应用了 async await 异步函数 变成了同步函数调用