当前位置:   article > 正文

uniapp 微信小程序请求拦截器 接口封装_uniapp微信小程序请求封装

uniapp微信小程序请求封装

前言:
请求拦截器可以在我们需要传递请求头的时候使用,例如:token
也会在当token发生变化的时候给予响应,所以我们做好对应的判断即可

1.首先在根目录创建common文件夹,
在里面创建request.js文件并加入以下代码:

  1. export default {
  2. config: {
  3. //baseURL这里可以放自己的接口域名
  4. baseURL: "",
  5. getToken() {
  6. //获取token
  7. let token = uni.getStorageSync("userInfo").token;
  8. if (!token) {
  9. return uni.reLaunch({ url: "/pages/login/login" });
  10. }
  11. return token;
  12. },
  13. //获取userid
  14. getUser() {
  15. let id = uni.getStorageSync("userInfo").id;
  16. if (!id) {
  17. return uni.reLaunch({ url: "/pages/login/login" });
  18. }
  19. return id;
  20. },
  21. // 响应拦截器
  22. beforeRequest(options = {}) {
  23. return new Promise((resolve, reject) => {
  24. //请求的地址 = 上面设置的域名加上接口封装的地址
  25. options.url = this.baseURL + options.url;
  26. options.method = options.method || "POST";
  27. //添加请求头
  28. options.header = {
  29. token: this.getToken(),
  30. id: this.getUser(),
  31. };
  32. resolve(options);
  33. });
  34. },
  35. // 请求拦截器
  36. handleResponse(data) {
  37. //自行打印data根据data里的数据进行判断token过期等等
  38. if (data.data.code == 0 && data.data.msg == "权限错误"){
  39. uni.showModal({
  40. title: '提示',
  41. content: '已掉线,是否重新登录',
  42. showCancel: true,
  43. success: ({ confirm, cancel }) => {
  44. if(confirm){
  45. uni.redirectTo({ url: '/pages/login/login' })
  46. }else{
  47. }
  48. }
  49. })
  50. }
  51. return data;
  52. },
  53. },
  54. // request 请求
  55. request(options = {}) {
  56. return this.config
  57. .beforeRequest(options)
  58. .then((opt) => {
  59. return uni.request(opt);
  60. })
  61. .then((res) => this.config.handleResponse(res));
  62. },
  63. };

2,在common文件夹下接着新建一个example.js文件来当作接口封装的文件

  1. // api/example.js
  2. import api from "@/common/request.js";
  3. //把我们刚才写的request.js文件引入过来
  4. export function pubdemo(data) {
  5. console.log(data, "传递的参数");
  6. //使用引入的request发送请求
  7. return api.request({
  8. //request.js文件里面已经有前缀了所以这里直接写后面的路径即可
  9. url: "/api/web/Notice/reminder",
  10. method: "post",
  11. data: data,
  12. });
  13. }

3,页面内使用

  1. import { pubdemo } from "@/common/example.js";
  2. pubdemo({
  3. //这里是要传递的参数,前面参数名后面参数值
  4. id: 12,
  5. }).then((res) => {
  6. console.log(res.data,res.data);
  7. });

4,对于一些不用传递参数的接口直接把变量名里面的对象删除即可

  1. pubdemo().then((res) => {
  2. console.log(res.data,res.data);
  3. });
微信小程序

微信小程序跟uniapp同理,只需要把某些东西改一下即可

创作不易,留下免费的双击关注再走吧~

声明:本文内容由网友自发贡献,转载请注明出处:【wpsshop博客】
推荐阅读
相关标签
  

闽ICP备14008679号