用戶
 找回密碼
 立即注冊

QQ登錄

只需一步,快速開始

掃一掃,登錄網站

小程序社區 首頁 教程 查看內容

微信小程序--wx.request封裝和使用

Rolan 2019-7-3 00:31

微信小程序基礎熟悉 web開發的朋友可能對 axios情有獨鐘。wx.request的二次封裝api的集中管理和使用2、配置 baseUrl一般情況下,項目中的 baseUrl域名前綴、登錄的 code、 用戶信息等都是配置在 app.js中//app.js Ap ...

  • 微信小程序基礎
  • 熟悉 web 開發的朋友可能對 axios 情有獨鐘。
  • wx.request 的二次封裝
  • api 的集中管理和使用

2、配置 baseUrl

  1. 一般情況下,項目中的 baseUrl 域名前綴、登錄的 code 、 用戶信息 等都是配置在 app.js
//app.js
App({
  onLaunch: function () {
    wx.login({
      success: res => {
        if (res.code) {
          this.globalData.loginCode = res.code   // 獲取的code碼,以進一步換取用戶信息
          // res: {
          //   code: "061Zltjh1sXj6s0z96hh1Z1njh1Zltj5"
          //   errMsg: "login:ok"
          // }
        } else {
          console.log('登錄失敗!' + res.errMsg)
        }
      }
    })
  },
  globalData: {
    userInfo: null,
    loginCode: null,
    baseUrl: 'https://...'
  }
})
復制代碼

3、封裝 wx.request

  1. 在小程序目錄下建立 utils 文件夾,并在文件夾下創建 request.js 文件
// request.js
const request = (options) => {
  return new Promise((resolve, reject) => {
    const { data, method } = options
    if(data && method !== 'get') {
      options.data = JSON.stringify(data)
    }
    wx.request({
      header: { 'Content-Type': 'application/json' },
      ...options,
      success: function(res) {
        if(res.data.code === 2000) {
          resolve(res.data)
        } else {
          reject(res.data)
        }
      },
      fail: function(res) {
        reject(res.data)
      }
    })
  })
}
export default request
復制代碼

4、 api 的集中管理和使用

  1. 在小程序目錄下建立 api 文件夾,并在文件夾下創建 user.js 文件(文件名推薦按模塊命名)
  2. 用過 axios 的朋友接下來應該會感覺很熟悉
// user.js
import request from '../utils/request.js'
// baseUrl也可拼接在request.js中,當有多個鑒權模塊,放在這里更靈活
const baseUrl = getApp().globalData.baseUrl

export function apiLogin(data) {
  return request({
    url: `${baseUrl}/user/login`,
    method: 'post',
    data
  })
}

export function apiGetUserInfo() {
  return request({
    url: `${baseUrl}/user/userInfo`,
    method: 'get'
  })
}

export function apiModifyUserPassword(data) {
  return request({
    url: `${baseUrl}/user/modifyPassword`,
    method: 'put',
    data
  })
}

export function apiLogout() {
  return request({
    url: `${baseUrl}/user/logout`,
    method: 'delete'
  })
}
復制代碼
  1. 在頁面中使用
// pages/login/login.js
import { apiLogin } from '../../api/user.js'
Page({
  onLoad: function (options) {
    this.login()
  },
  login() {
    apiLogin({
      // api params
    }).then(res => {
      // handle success
    }).catch(error => {
      // handle error
    })
  }
})
復制代碼

5、尾言

  1. 由于涉及到 ES6 語法,需要在本地設置中開啟 ES6 轉 ES5
  2. 小程序開發過程中應注意 this 指向性問題。
  3. 感謝瀏覽,若有不足之處請指正,歡迎留言探討。
鮮花
鮮花
雞蛋
雞蛋
分享至 : QQ空間
收藏
原作者: SilentLove 來自: 掘金
致青春APP 云南时时彩开奖时间 首单减20商家怎么赚钱 贵州快3开奖l结果115024-1 广西11选5走势图 山西快乐10分开奖记录 搞笑赚钱对话 2017微信签到赚钱 黄金娱乐官网app下载 澳洲幸运10下载 上海麻将159规则 贵州快三开奖查询今天 2017飞镖比赛视频 上海天天彩选四今晚开奖结果记录 长沙麻将碰碰胡图解 k10五码三期必中 黑龙江快乐十分开奖结