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

• 微信小程序基础
• 熟悉 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: baseUrl: 'https://...'
  }
})
复制代码

3、封装 wx.request

1. 在小程序目录下建立 utils?文件夹，并在文件夹下创建 request.js?文件

) {
      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?的朋友接下来应该会感觉很熟悉

// baseUrl也可拼接在request.js中，当有多个鉴权模块，放在这里更灵活
const baseUrl = getApp().globalData.baseUrl

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

apiGetUserInfo() {
  ${baseUrl}/user/userInfo`,0);">'get'
  })
}

apiModifyUserPassword(data) {
  ${baseUrl}/user/modifyPassword`,0);">'put',0); font-weight: bold;">apiLogout() {
  ${baseUrl}/user/logout`,0);">'delete'
  })
}
复制代码

3. 在页面中使用

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. 感谢浏览，若有不足之处请指正，欢迎留言探讨。

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!