微信小程序封装API接口(2)

先建一个api文件夹（叫什么都可以，但是为了规范化），在下面新建文件request.js

1. // ----http----
2. // api URL
3. const apiUrl = "https://接口地址:端口";// 公共的请求地址
4. // 封装微信请求方法
5. const request = (params) => {
6.   let url = params.url;
7.   let data = params.data;
8.   let method = params.method;
9.   let header = {
10.     "Content-Type": "application/json"
11.   };
12.  
13.   // 鉴权验证，获取登录之后后端返回的token，存在即在头部Authorization写token，具体的看后端需求
14.   if (wx.getStorageSync("token")) {
15.     // header.Authorization = wx.getStorageSync("token");
16.     header.token = wx.getStorageSync("token");
17.   }
18.   return new Promise((resolve, reject) => {
19.     wx.request({
20.       url: apiUrl + url, // api url
21.       method: method, // get/post
22.       data: data, // 请求参数
23.       header: header, // 头部
24.       success(res) {
25.         // 请求成功
26.         // 判断状态码---errCode状态根据后端定义来判断
27.         if (res.statusCode < 399) {
28.           if (res.data.Code === 401) {
29.             wx.showModal({
30.               title: "提示",
31.               content: "请登录",
32.               showCancel: false,
33.               success(res) {
34.                 wx.navigateTo({
35.                   url: "/pages/login/login",
36.                 });
37.               },
38.             });
39.             reject(res.data);
40.           }
41.           resolve(res.data);
42.         } else {
43.           // 其他异常
44.           switch (res.statusCode) {
45.             case 404:
46.               wx.showToast({
47.                 title: '未知异常',
48.                 duration: 2000,
49.               })
50.               break;
51.             default:
52.               wx.showToast({
53.                 title: '请重试...',
54.                 duration: 2000,
55.               })
56.               break;
57.           }
58.           reject("未知错误,请稍后再试");
59.         }
60.       },
61.       fail(err) {
62.         if (err.errMsg.indexOf('request:fail') !== -1) {
63.           wx.showToast({
64.             title: '网络异常',
65.             icon: "error",
66.             duration: 2000
67.           })
68.         } else {
69.           wx.showToast({
70.             title: '未知异常',
71.             duration: 2000
72.           })
73.         }
74.         reject(err);
75.       },
76.       complete() {
77.         wx.hideLoading()
78.       },
79.     });
80.   });
81. };
82.  
83. module.exports = {
84.   apiUrl,
85.   request,
86. }

然后再按业务需求，对具体的接口地址进行封装，比如，我这里在api文件夹下再新建一个user.js文件，里面放登录，注册的一些方法，请求类型和请求参数根据接口文档写。

1. import {
2.   request
3. } from "./request"
4.  
5.  
6. // 用户相关
7.  
8. // 登录
9. export const login = (params) => {
10.   return request({
11.     url: '/user/login',
12.     data: params,
13.     method: 'POST',
14.   })
15. }
16. // 注册
17. export const register = (params) => {
18.   return request({
19.     url: '/user/reg',
20.     data: params,
21.     method: 'POST',
22.   })
23. }

正式在项目中使用：

1. import {
2.   login
3. } from '../../../api/user'
4. // 点击登录的方法
5. handleLogin(){
6.     login({
7.       name: xxx,
8.       password: xxx,
9.     }).then((res) => {
10.       if (res.code == 200) {
11.     // 登录成功之后的处理
12.       } else {
13. // 登录失败的处理
14.       }
15.     }).catch((res) => {})
16. }