小程序api封裝（方法一）

研究小程序的路上越走越遠....坑很多 很不習慣剛剛開始

在utils文件夾下面新增api.js  http.js文件

// http.js
module.exports = { http(url, method, params) { // 獲取token，自行獲取token和簽名，token和簽名表示每個接口都要發送的數據
    let token = ''
     // 獲取簽名 (后台怎么定義的，就傳什么) 具體情況穿不穿
    let sign = '' let data = { token, sign } // 在這里判斷一下data是否存在，params表示前端需要傳遞的數據，params是一個對象，有三組鍵值對，
    // data：表示請求要發送的數據，success：成功的回調，fail：失敗的回調，這三個字段可缺可無，其余字段會忽略
    if (params.data) { for (let key in params.data) { // 在這里判斷傳過來的參數值為null，就刪除這個屬性
        if (params.data[key] == null || params.data[key] == 'null') { delete params.data[key] } } data = { ...data, ...params.data } } // 就是拼接上前綴,此接口域名是開放接口，可訪問 如果開發環境可以勾選詳情選項的 不校驗合法域名、TLS版本及HTTPS證書
 wx.request({ url: '合法域名' + url, // 判斷請求類型，除了值等於'post'外，其余值均視作get其他的請求類型也可以自己加上的
      method: method == 'post' ? 'post' : 'get', data, // post請求 把header 該為 application/x-www-form-urlencoded 就可以了
 header: { 'content-type': method == 'get' ? 'application/json' : 'application/x-www-form-urlencoded' }, success(res) { params.success && params.success(res.data) }, fail(err) { wx.showToast({ title: '服務器內部錯誤', icon: 'none', duration: 1500 }) params.fail && params.fail(err) }, complete() { setTimeout(() => { wx.hideLoading(); },1500) } }) } }

// api.js // 在這里面定義所有接口，一個文件管理所有接口，易於維護 // 引入剛剛封裝好的http模塊，import屬於ES6的語法，微信開發者工具必須打開ES6轉ES5選項
import { http } from './http'; // 每一個接口定義一個函數，然后暴露出去，供邏輯代碼調用 // 接口請求的路由地址以及請求方法在此處傳遞
function postLoginApi(params) { http('/api/xxx/login', 'post', params) } function getUserListApi(params) { http('/api/xxx/list', 'get', params) } // 暴露接口
export default { postLoginApi, getUserListApi }

頁面調用

  import http from '../../utils/api' // 引入api接口管理文件

getData(){ http.postLoginApi({ // 調用接口，傳入參數
 data: { token: '460512FF0FE2392D6CB6D8A6560805CC' }, success: res => { console.log('接口請求成功', res) this.setData({ // data定義的數據
 userInfo: res.data }) }, fail: err => { console.log(err) } }) }, onLoad: function (){ this.getData() }

  原創未經允許不得轉載！！！轉載請注明出處~謝謝合作；