一般的進行資料請求

並且很多時候需要使用臨時變數儲存this指標。

/**
   * 頁面的初始資料
   */
  data: {
    test: 1
  },
/**
 * 生命週期函式--監聽頁面載入
 */
onLoad: function (options) {
	let _this = this;
	wx.request({
    	url: 'http://localhost:8080/api/get_all',
        method: 'GET',
        success: function(res) {
        	console.log(res);
        	console.
 
log(_this.data.test);
     	}
    })

},

使用ES6的箭頭函式

可以避免出現this指標作用域的問題。

/**
   * 頁面的初始資料
   */
  data: {
    test: 1
  },

  /**
   * 生命週期函式--監聽頁面載入
   */
  onLoad: function (options) {
    wx.request({
      url: 'http://localhost:8080/api/get_all',
      method: 'GET',
      success: (res) => {
        console.
 
log(res);
        console.log(this.data.test);
      }
    })
  },

開始封裝request請求

1. 提取一些固定的資料封裝為const物件，並用單獨的檔案進行儲存

const config = {
    // 所有請求的公共部分
  	api_base_url: "http://localhost:8080/api"
    // appkey
    ...
}
// 將config匯出
export {config}

推薦將檔案放置在專案的更目錄，檔名為：baseConfig.js

2. 封裝HTTP請求：

在專案更目錄新建一個工具目錄為utils，在裡面放置我們一些對http請求相關的檔案

/utils/http.js

// 這兒需要使用相對路徑
import {config} from "../baseConfig.js"   

// 定義一個HTTP請求類
class HTTP{

  request(params){
    // 預設不傳遞method為get請求  
    if(!params.method){
      params.method = "GET"
    }
    wx.request({
      url: config.api_base_url+params.url,
      data: params.data,
      method: params.method,
      header: {
        'content-type': 'application/json'
      },
      success: (res) => {
        // 將http請求返回的狀態碼（這個狀態碼是數字型別）獲取
        let code = res.statusCode.toString()
        // 如果是2開頭的狀態碼就是請求成功的，直接將資料返回給回撥函式
        if(code.startsWith("2")){
          params.success(res.data)
        }else{
          // 針對400開頭的錯誤處理
        }
      },
      fail: (err) => {
        // 請求失敗的處理  500開頭的錯誤
      }
    })
  }
}
// 最後將HTTP 請求返回
export {HTTP}

3. 對請求出錯情況進行處理

如果我們要定製自己各種出錯情況，我們需要定義一個自己的錯誤碼，對使用者進行反饋。

在utils的目錄下新建一個檔案error.js， 專門定義我們自己的一些錯誤碼。

export const tips = {
  1 : '出錯了', //預設的錯誤提示
  1000: '發生了一個錯誤!',
  1001: '路徑不存在',
  1002: '資料不存在'
}

對http.js檔案進行修改

import {config} from "../config.js"
// 引入檔案
import {tips} from "./error.js"


class HTTP{

  request(params){
    if(!params.method){
      params.method = "GET"
    }
    wx.request({
      url: config.api_base_url+params.url,
      data: params.data,
      method: params.method,
      header: {
        'content-type': 'application/json'
      },
      success: (res) => {
        let code = res.statusCode.toString()
        if(code.startsWith("2")){
          params.success(res.data)
        }else{
          // 在返回資料中獲取錯誤碼  
          let error_code = res.data.error_code
          // 呼叫錯誤處理方法
          this._error_status(error_code)
        }
      },
      fail: (err) => {
        this._error_status(1000)
      }
    })
  }
  // 定義錯誤請求方法 （方法前有下劃線為私有方法）
  _error_status(error_code){
    if(!error_code){
        error_code = 1
    }
    wx.showToast({
      title: tips[error_code],
      icon: 'none',
      duration: 2000
    })
  }
}

export {HTTP}

4. 定義個Model類，在次封裝將一個頁面的所有請求都在Model類中進行處理

在專案的根目錄新建一個model資料夾，用來存放model類

import {HTTP} from "../utils/http.js"

// 定義一個PageModle直接繼承HTTP類
class PageModel extends HTTP{
  // 定義請求方法getAll，並且通過callback進行回撥，然後通過this直接呼叫父類的request方法
  getAll(callback){
    this.request({
      url: 'user/list',
      success: (res) => {
        callback(res)
      }
    })
  }
}

export {PageModel}

5. page頁面的使用封裝的方法

import {PageModel} from "../../models/pageModel.js"
let pageModel = new PageModel()
Page({

  /**
   * 頁面的初始資料
   */
  data: {

  },

  /**
   * 生命週期函式--監聽頁面載入
   */
  onLoad: function (options) {
    pageModel.getAll((res) => {
      console.log(res)
      // 對獲取的資料進行自己的處理
    })
  },

  ...
})