技術標籤：前端技術開發筆記小程式jshttp

微信小程式封裝公用的http請求方法

• 微信小程式目錄結構
• 封裝Http請求方法
• 解決Http請求方法非同步問題
• 解析 Promise 物件

微信小程式目錄結構

首先介紹一下微信小程式的目錄結構

上圖就是初始化小程式後，最初的目錄結構了。
一共有 *.js , *.json , *.wxml , *.wxss 這幾種型別的檔案，以及pages，utils兩個資料夾。依次給大家介紹。

1. JS檔案 : 存放以頁面為單位的小程式方法、初始化的資料、元件事件的檔案。
2. JSON檔案： 存放以頁面為單位的頁面屬性，例如：頁面的導航欄標題，icon等設定。
3. WXML檔案：存放頁面元素，標籤的檔案，類似於H5的 .html 結尾的檔案。
4. WXSS檔案： 存放頁面樣式的檔案，類似於CSS。
5. Page資料夾： 存放頁面檔案相關的資料夾，例如js，json，wxml，wxss。
6. Utils資料夾： 存放工具類的資料夾

除了這些檔案外，還有最外層的app.js , app.json,app.wxss三個檔案

1. app.js：存放全域性公用的JS方法。
2. app.json：存放全域性公用的頁面屬性。
3. app.wxss：存放全域性公用的頁面樣式

封裝Http請求方法

接下來就不如正題，封裝請求方法了。微信小程式的http請求方法如下

wx.request({
        url: url,
        method:"POST"
 
,
        header:{
          'content-type': 'application/x-www-form-urlencoded',//解決請求不到資料
        },
        data:data,
        success:result=>{
          //請求成功後處理資料
        },
        fail:result=>{
          //請求失敗後給出提示
        }
})

但是不可能每次請求時，都寫一遍這樣的請求方法，會有很多冗餘程式碼。
那麼封裝方法的重要性就體現出來了。

1. 新建一個普通的JS方法

 sendHttp:function(url,data，method){
		
 }

2. 將微信的http請求方法複製進去

 sendHttp:function(url,data，method){
		wx.request({
        url: url,
        method:"POST",
        header:{
          'content-type': 'application/x-www-form-urlencoded',//解決請求不到資料
        },
        data:data,
        success:result=>{
          //請求成功後處理資料
        },
        fail:result=>{
          //請求失敗後給出提示
        }
	})
 }

這樣一個簡單的http請求方法就完成了。

還沒完。。。。。。。。。。。

因為請求方法是非同步的，所以公用的請求方法無法把介面返回的資料return出去

下面繼續補充。。。

解決Http請求方法非同步問題

1. 小程式為了解決請求方法非同步無法return返回值的問題，於是才有了Promise物件。接下來把上面的方法稍作修改

 sendHttp:function(url,data，method){
		return new Promise((resolve, reject)=>{
      wx.request({
        url: url,
        method:method,
        header:{
          'content-type': 'application/x-www-form-urlencoded',//解決請求不到資料
        },
        data:data,
        success:result=>{
          if(result.data.code!=200){
            wx.showToast({
              title: result.data.msg,
              icon: 'none',
              duration: 2000//持續的時間
            })
          }else{
            resolve(result.data.result);
          }
        },
        fail:result=>{
          if(result.data.code!=200){
            wx.showToast({
              title: result.data.msg,
              icon: 'none',
              duration: 2000//持續的時間
            })
          }else{
            reject(result.data.result);
          }
        }
      })
    })
 }

將請求方法使用Promise包起來，使用resolve/reject返回一個Promise物件。
至於resolve/reject的區別嘛

1. resolve：請求成功後處理的物件
2. reject：請求失敗後處理的物件

但是又有個新的問題。怎麼解析Promise物件呢？

下面繼續。。。。。。。

解析 Promise 物件

1. 新建一個公用的JS方法

 getHttpResult:async function(url,data,method){
  return await this.sendHttp(url,data,method);
  },

使用async關鍵字修飾方法，使方法非同步呼叫請求，再使用await關鍵字修飾呼叫的請求方法。然後return出去
2. 接下來就可以再各個需要Http請求的地方呼叫啦

formSubmit:function(e){
    var promise= app.getHttpResult(url,data);
    promise.then(resp=>{
      if(null!=resp){
      //跳轉頁面
        wx.redirectTo({
          url:'../mediate/mediate'
        })
      }
    })
   }

解析promise物件需要使用.then方法，然後自定義一個返回值名稱，上述程式碼中的resp引數就是解析出來promise物件結果，也就是介面返回的真實資料啦。

在then方法裡面就可以寫Http請求之後的資料操作啦，比如頁面列表的渲染，表單提交後的頁面跳轉。

PS：初次學習，不喜勿噴！ 歡迎交流

This is all ！！！