技術標籤：小程式非同步請求獲取資料promise小程式api

將原生的請求修改為promise的方式

微信小程式 網路傳送非同步請求獲取輪播圖資料的 原始程式碼：

// pages>index>index.js>...

這種原生請求獲取資料的方式沒有問題，但需要多次獲取資料的時候就會陷入“地獄巢狀”
我們可以通過 es6 的 promise 來進行優化，解決這個問題：

首先，在 資源管理器 中新建一個 request 資料夾
在裡面新建 : index.js。

// request>index.js>...

export const request=(params)
 
=>{
  return new Promise((resolve,reject)=>{
    wx.request({
     ...params,
     success:(result)=>{
       resolve(result);
     },
     fail:(err)=>{
       reject(err);
     }
    });
  })
}

resolve表示成功時候執行的回撥函式 ； reject表示失敗的時候執行的回撥函式
通過呼叫函式傳遞引數的形式使用 params

完成了最簡單的封裝過的微信請求程式碼，然後回到首頁引用程式碼：

// pages>index>index.js>...

//1 引入 用來發送請求的方法 
import{ request }from "../../request/index.js";
Page({
  data: {
    //輪播圖陣列
    swiperList:[]
  },
 //頁面開始載入 就會觸發
  onLoad:function(options) {
    request({url:"https://api-hmugo-web.itheima.net/api/public/v1/home/swiperdata"})
    .then(result=>
 
{
      this.setData({
        swiperList:result.data.message
      })
    })  
  }, 
})

呼叫自己封裝的 request 函式
讓url傳遞到"...params"這個位置，傳送請求
儲存後 請求成功 就可以觸發一個 .then 函式，返回值為 rusult
這時請求成功後的引數 result 就會傳遞到 .then 裡邊
最後把資料匯入Data

這時如果有巢狀，就可以在同層級後面加入 .then 函式，優化程式碼更加直觀了。

開始學小程式，第一次寫文章，請多指教呀！