微信小程序：封装request请求、解决请求路径问题

一、创建文件

1、创建请求文件

创建工具类文件request.js，目的是用于发送请求

二、js接口封装

1、写入接口路径

创建一个变量BASE_URL专门存储api请求地址

2、获取全局的token变量

从缓存中取出token的数据

3、执行请求

(1)方法中接收传递的参数

function request(url, method, data)

请求页面需要传递路径、请求方法、数据这三个参数

(2)异步处理-发送请求

使用Promise进行异步处理

根据request方法，将参数进行传递

传递请求头，类型为json,并传递token数据

(3)成功请求

请求成功后将数据返回，如果存在错误代码就报错或者返回到登录页

(4)导出方法

将post和get方法成功返回

4、完整代码

// utils/request.js
const BASE_URL = 'XXX'; // 接口基础地址

// 自动获取 token 的函数
function getToken() {
  // 可以换成从全局变量、store 中获取
  return wx.getStorageSync('token');
}
//执行请求
function request(url, method, data) {
  const token = getToken();
  return new Promise((resolve, reject) => {
    wx.request({
      url: BASE_URL + url,
      method,
      data,
      header: {
        'content-type': 'application/json',
        'Authorization': token ? `Bearer ${token}` : ''
      },
      success(res) {
        if (res.statusCode >= 200 && res.statusCode < 300) {
          resolve(res.data);
        } else if (res.statusCode === 401) {
          // token 失效，跳转登录页
          wx.redirectTo({ url: '/pages/login/login' });
        } else {
          wx.showToast({ title: '请求失败', icon: 'none' });
          reject(res);
        }
      },
      fail(err) {
        wx.showToast({ title: '网络异常', icon: 'none' });
        reject(err);
      }
    });
  });
}
//导出方法
export default {
  get(url, data) {
    return request(url, 'GET', data);
  },
  post(url, data) {
    return request(url, 'POST', data);
  },
};

三、解决pages页面引用方法问题

1、使用全局变量

(1)在 `app.js` 中引入并挂载到全局对象

在全局中，引入request方法，然后将该方法值存入到全局变量

// app.js
import request from './utils/request';

App({
    globalData: {
        request: request,
    },
});

(2)在页面中获取使用

获取全局变量中的request方法

定义一个变量request，专门存储全局变量中的request

使用示例

直接使用request方法

request.get('/testget')

2、使用 ES6 模块导入

微信小程序支持 ES6 模块化开发，你可以直接通过 import 引入 request.js。

(1)确保项目支持 ES6 模块

确保 project.config.json 中启用了 ES6 模块支持：

{
    "usingComponents": {},
    "esModule": true
}

(2)在 `utils/request.js` 中导出

// utils/request.js
export default function request(options) {
    return new Promise((resolve, reject) => {
        wx.request({
            ...options,
            success: (res) => resolve(res.data),
            fail: (err) => reject(err),
        });
    });
}

(3)在页面中导入并使用

// pages/example/example.js
import request from '../../utils/request';
Page({
    onLoad() {
        request({
            url: 'https://example.com/api ',
            method: 'GET',
        })
        .then((data) => {
            console.log(data);
        })
        .catch((error) => {
            console.error(error);
        });
    },
});

3. 使用工具函数库（辅助工具）

如果你希望进一步简化代码，可以创建一个工具函数库，集中管理所有的公共方法。

(1)创建工具函数库：

// utils/tools.js
import request from './request';
export const api = {
    getUserInfo: () => request({ url: '/api/user', method: 'GET' }),
    getPosts: () => request({ url: '/api/posts', method: 'GET' }),
};
export { request };

(2)在页面中导入并使用：

// pages/example/example.js
import { api } from '../../utils/tools';
Page({
    onLoad() {
        api.getUserInfo().then((data) => {
            console.log('User Info:', data);
        }).catch((error) => {
            console.error(error);
        });
        api.getPosts().then((data) => {
            console.log('Posts:', data);
        }).catch((error) => {
            console.error(error);
        });
    },
});

4. 使用插件机制

如果你希望更系统化地管理请求逻辑，可以考虑将 request.js 封装为一个插件，并通过插件的方式引入。

(1)创建插件：

// plugins/requestPlugin.js
const request = require('../utils/request');
module.exports = {
    install(app) {
        app.globalData.request = request;
    },
};

(2)在 app.js 中注册插件：

// app.js
const requestPlugin = require('./plugins/requestPlugin');
App({
    onLaunch() {
        requestPlugin.install(this);
    },
});

(3)在页面中使用：

// pages/example/example.js
Page({
    onLoad() {
        this.globalData.request({
            url: 'https://example.com/api ',
            method: 'GET',
        }).then((data) => {
            console.log(data);
        }).catch((error) => {
            console.error(error);
        });
    },
});

总结

如果你希望快速实现且代码简洁，推荐使用 ES6 模块导入 （方案 2）。
如果你希望所有页面都能方便地访问请求方法，推荐使用 全局变量挂载 （方案 1）。
如果你需要更复杂的工具链或插件化管理，可以考虑 工具函数库 （方案 3）或 插件机制 （方案 4）。

四、post、get请求示例，结果展示

使用全局变量示例

1、使用post方法

使用post请求方法，传递请求的参数，成功执行then,失败执行catch

// post测试
request.post('/testpost')
.then(res => {
    console.log('请求成功:', res);
})
.catch(err => {
    console.error('请求出错:', err);
});

2、使用get方法

使用get请求方法，传递请求的参数，成功执行then,失败执行catch

//get测试
request.get('/testget')
.then(res => {
    console.log('请求成功:', res);
})
.catch(err => {
    console.error('请求出错:', err);
});

3、完整代码

const request = getApp().globalData.request
Page({
  data: {},
  onLoad() {
    this.getData()
  },
  getData() {
    //get测试
    request.get('/testget')
      .then(res => {
        console.log('请求成功:', res);
      })
      .catch(err => {
        console.error('请求出错:', err);
      });
    // post测试
    request.post('/testpost')
      .then(res => {
        console.log('请求成功:', res);
      })
      .catch(err => {
        console.error('请求出错:', err);
      });
  },
})