微信小程序封装请求接口_微信小程序封装接口请求

作者：你好赵伟 | 2024-03-22 06:05:32

踩

微信小程序封装接口请求

目的

因为之前一直在使用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  响应的数据
	}
})
1
2
3
4
5
6
7
8
9
10

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;
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

config.js

用于配置基本信息

export default {
  // api请求前缀
  // 这里填后端请求的固定前缀
  webUrl:'************',
}
1
2
3
4
5

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;
 },
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58

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);
	}
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114

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);
},
1
2
3
4
5
6
7
8
9
10
11
12

用户的其他请求封装：需要使用token

首先看张截图，明白post的传参都代表什么

在这里插入图片描述
在options中多加这两个属性

{
	token: true,
	checkToken: true
}
1
2
3
4

请求如下：

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)
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

重点：

在这里插入图片描述
在request.js的最底层请求封装在，这个header的Authorization的token一定要加上“Bearer ”
没有个空格，否则一直行不通

使用方法

在app.js中引入，并挂载为全局方法

import request from './utils/common/request.js'
import user from './utils/common/user.js'
1
2

App({
  onLaunch: function () {
    // 挂载全局方法
    wx.$http = request
    wx.User = user
})
1
2
3
4
5
6

在guide.js中使用
```
const app = getApp()
1
```
```
wx.User.login({
  url: "/auth/login",
  data: {
    code: res.code
  }
})
       
1
2
3
4
5
6
7
8
```
选择好wx.User或者wx.$http
选择各自有的方法，传相应参数即可

ps: $http中有post和get等基本方法

类似上面使用即可

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/你好赵伟/article/detail/285775