本文介绍了如何在使用Vue开发习惯下，将微信小程序的wx.request封装成async/await风格，并实现每次请求自动添加token，简化编程。通过实例展示了封装后的请求模块、配置文件和用户功能管理，便于在App.js中全局调用和用户登录登出操作。
目的
因为之前一直在使用vue开发，相较于微信小程序的wx.request里面的回调，还是感觉async和await使用起来比较方便，是以想继续使用此方法进行操作。同时，因为每次后端接口请求都要携带上token，为了方便操作，将其进行封装，使之每次请求自动加上token，简便编程
实现过程
-
api.js
主要参考：
微信小程序的异步请求/ promise封装 / async&await改造Await 修饰的对象一定要返回一个 promise 对象
而wx.request并不符合这一规定。a.首先了解wx.request
// 原生发送异步请求 wx.request({ url: '', // 请求的路径 method: "", // 请求的方式 data: {}, // 请求的数据 header: {}, // 请求头 success: (res) => { // res 响应的数据 } })b.用 promise 封装 wx.request
app.js:
------------------- 第一, 在utils下新建一个js文件,进行封装 ----------------------- // promise 特点：一创建就立即执行，一般情况下解决这个问题我们会将其封装为一个函数 // options:请求时的参数对象 function myrequest(options) { return new Promise((resolve, reject) => { // 逻辑：发送请求到服务器 wx.request({ url: options.url, method: options.method || "GET", data: options.data || {}, header: options.header || {}, success: res => { resolve(res); }, fail: err => { reject(err); } }); }); } // 暴露给外界 export default myrequest; -
config.js
用于配置基本信息
export default { // api请求前缀 // 这里填后端请求的固定前缀 webUrl:'************', } -
request.js
所有请求的封装
import config from "./config.js"; import User from "./user.js"; import myrequest from "./api.js"; export default { config: { baseUrl:config.webUrl, header: { 'Content-Type':'application/json;charset=UTF-8', // 'Content-Type':'application/x-www-form-urlencoded' }, data: {}, method: "GET", dataType: "json", }, request(options = {}) { options.header = options.header || this.config.header; options.method = options.method || this.config.method; options.dataType = options.dataType || this.config.dataType; options.url = this.config.baseUrl+options.url; console.log(options); // 暂定 if(options.token) { if(!this.checkToken(options.checkToken)) return; options.header.Authorization = User.token; } return myrequest(options); }, get(url,data,options={}) { options.url = url; options.data = data; options.method = 'GET'; return this.request(options); }, post(url,data,options={}){ options.url = url; options.data = data; options.method = 'POST'; console.log(options) return this.request(options); }, // 验证用户是否登录 checkToken(checkToken){ if (checkToken && !User.token) { // 未登录 wx.showToast({ title: '请先登录', }); wx.navigateTo({ url: '/pages/index/index', }); return false; } return true; }, } -
user.js
封装用户基本功能的请求
import $http from "./request.js"; export default { // 用户token 测试token：4cd36bf70649475ac0cd6fae78250954474a4350 token: false, // 用户信息 userinfo: false, // 初始化 __init() { // 获取用户信息 this.userinfo = wx.getStorageSync("userinfo"); this.token = wx.getStorageSync("token"); }, // 权限验证跳转 // 类似路由守卫 navigate(options, NoCheck = false, type = "navigateTo") { // 是否登录验证 // $http使用了request.js的方法 if (!$http.checkToken(true)) return; // 跳转 switch (type) { case "navigateTo": wx.navigateTo(options); break; case "redirectTo": wx.redirectTo(options); break; case "reLaunch": wx.reLaunch(options); break; case "switchTab": wx.switchTab(options); break; } }, // 登录 async login(options = {}) { wx.showLoading({ title: '登录中...', mask: true }); // 请求登录 const {data:res} = await $http.post(options.url,options.data) console.log(res); // 登录失败 if(res.code != 200){ wx.hideLoading(); wx.showToast({ title: "用户或密码错误", icon: "none" }) return false; } // 登录成功 保存状态 // Authorization: Bearer eyJhbGciOiJIUzUxMiJ9.eyJzdWIiOiJxdWxpdGFvIiwiY3JlYXRlZCI6MTU4NjY4NTQxNzk3NywiZXhwIjoxNTg3MjkwMjE3fQ.1B0umjdawHeqFfAQeNNQLAKEbkXjH0jr8o9PjCw2sfAwWdQlLSOQRCPX2w79mFD8_aFajZBkekS3Io9WSMPDTA console.log(res); // res.data就是返回的全部信息 this.token = res.data.token; this.userinfo = res.data; console.log("token: ", this.token); console.log("userinfo: ", this.userinfo); // 本地存储 wx.setStorageSync("userinfo", this.userinfo); wx.setStorageSync("token", this.token); // 成功提示 wx.hideLoading(); wx.showToast({ title: '登录成功' }); console.log(options); return true; }, // 退出登录 async logout(showToast = true) { // 退出登录 // await $http.post('/user/logout',{},{ // token:true, // checkToken:true , // }); // 清除缓存 wx.removeStorageSync('userinfo'); wx.removeStorageSync('token'); // 清除状态 this.token = false; this.userinfo = false; // 返回home页面 wx.switchTab({ url: "/pages/index/index", success() { let page = getCurrentPages().pop(); //跳转页面成功之后 if (!page) return; page.onLoad(); //如果页面存在，则重新刷新页面 } }) // 退出成功 if (showToast) { return wx.showToast({ title: '退出登录成功' }); } }, // 获取用户相关统计信息 async getUserInfo() { // 统计获取用户相关数据（总文章数，今日文章数，评论数 ，关注数，粉丝数，文章总点赞数） // let [err, res] = await $http.post('/user/getCurrentUser', {}, { // token: true, // checkToken: true // }) // 请求错误处理 // if (!$http.errorCheck(err, res)) return; // 成功 // this.userinfo = res.data.data; // console.log(this.userinfo); } }
ps: 这些js文件放置目录如下：
自定义封装user方法
- 登录封装：不需要携带token
async login(options = {}) {
// 请求登录
const {data:res} = await $http.post(options.url,options.data)
/*
这样写也可
const {data:res} = await $http.post(‘/auth/login’,{
code: '11111'
})
*/
console.log(res);
},
- 用户的其他请求封装：需要使用token
首先看张截图，明白post的传参都代表什么
在options中多加这两个属性
{
token: true,
checkToken: true
}
请求如下：
async updateUserInfo(options = {}) {
// 更新数据
// 只有添加token才能访问的请求需要在后面添加这两个属性，这个属性是直接加载到options上的
const { data: res } = await $http.post(options.url, options.data, {
token: true,
checkToken: true
})
console.log(res);
// 失败
if (res.code != 200) {
wx.showToast({
title: "获取信息失败",
icon: "none"
})
return false;
}
// console.log(res)
}
重点：
在request.js的最底层请求封装在，这个header的Authorization的token一定要加上“Bearer ”
没有个空格，否则一直行不通
使用方法
-
在app.js中引入，并挂载为全局方法
import request from './utils/common/request.js' import user from './utils/common/user.js'App({ onLaunch: function () { // 挂载全局方法 wx.$http = request wx.User = user }) -
在guide.js中使用
const app = getApp()wx.User.login({ url: "/auth/login", data: { code: res.code } })选择好wx.User或者wx.$http
选择各自有的方法，传相应参数即可ps: $http中有post和get等基本方法
类似上面使用即可
3560
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
