1.使用callback

1.config.js 定義配置信息

請求的通用信息

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 (業(yè)務對象)

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 =  http://www.wxapp-union.com/await Theme.getHomeLocationA();
    this.setData({
      topTheme:data[0]
    })
},

使用了 async await 異步函數 變成了同步函數調用