【小程序】封装网络请求request模块

一、封装request请求

因为我把所有项目中的接口也封装到了一个文件中,所以我建了一个services的文件夹,在下面建了一个request.js

在这个里面做了请求拦截器和响应拦截器,

javascript 复制代码
const apiConfig = require('../config/baseUrl.js');

class httpClient {
  prefixUrl = '';

  constructor(prefixUrl = '') {
    this.prefixUrl = prefixUrl
  }

  interceptors = {
    // 请求拦截器
    request: (params) => {
      if (params.showLoading) {
        // TODO: 封装loading
        tt.showLoading({
          "title": "加载中...",
          "mask": true,
        });
      }
      // 处理请求数据,如添加Header信息等,
      const config = {
        ...params,
        url: apiConfig.BASE_URL + this.prefixUrl + params.url,
        header: {
          ...params.header,
          'Content-type': 'application/json',
          //TODO: 后端需要的字段 
          // 'Access-Token': tt.getStorageSync('login.user.xxx')
        },
        timeout: 60000, // 超时时长,小程序默认是 1 分钟
      };

      if (config.method === 'GET') {
        config.url += '?' + Object.keys(config.data).map(key => `${encodeURIComponent(key)}=${encodeURIComponent(config.data[key])}`).join('&');
      }
      return config;
    },
    // 响应拦截器
    response: (response) => {
      console.log('response', response)
      if (response.config.showLoading) {
        tt.hideLoading();
      }
      //TODO: 错误信息处理
      if (response.data.code && response.data.code !== 0 && response.data.code !== 200) {
        tt.showToast({
          title: response.data.message,
          duration: 2000,
          icon: "none",
          mask: false
        });
        return Promise.reject(response);
      }
      return response.data;
    }
  }

  request(config) {
    config = this.interceptors.request(config)

    // 网络请求
    return new Promise((resolve, reject) => {
      tt.request({
        ...config,
        success: (res) => {
          const mergeRes = Object.assign({}, res, {config})
          resolve(this.interceptors.response(mergeRes))
        },
        fail: (err) => {
          const mergeErr = Object.assign({}, err, {config})
          reject(this.interceptors.response(mergeErr))
        },

      });
    });
  }

  get(url, data = {}, config = {}, loading = true) {
    return this.request(Object.assign({ url, data, method: 'GET', showLoading: loading }, config))
  }

  post(url, data = {}, config = {}, loading = true) {
    return this.request(Object.assign({ url, data, method: 'POST', showLoading: loading }, config))
  }

  put(url, data = {}, config = {}, loading = true) {
    return this.request(Object.assign({ url, data, method: 'PUT', showLoading: loading }, config))
  }

  delete(url, data = {}, config = {}, loading = true) {
    return this.request(Object.assign({ url, data, method: 'DELETE', showLoading: loading }, config))
  }

}

module.exports = httpClient;

2、封装对应的 api 文件

在service的文件夹下面建了一个api.js【因为目前这个小程序页面比较少,暂定把所有接口写在同一个文件夹下】

javascript 复制代码
const httpClient = require('./request.js');

class ApiManager extends httpClient {
  constructor(){
    super('/api');
  }

  login(data) {
    return this.post('/login', data);
  }

  getData(data, config) {
    return this.get('/train_types', data, config);
  }
}

module.exports = new ApiManager();

3. 管理所有地址

javascript 复制代码
module.exports = {
  BASE_URL: 'http://192.168.2.68:1911',
}

4. 使用

javascript 复制代码
	const loginResponse = await ApiManager.login({
      user_name: 'admin',
      password:'hsradmin2022'
    })
    console.log('loginResponse', loginResponse)
    const response = await ApiManager.getData({}, {
      header: {
        'Access-Token': loginResponse.data.access_token,
      },
    });
    this.setData({
      list: response.data.list
    })
    console.log(response.data);

参考链接
https://www.npmjs.com/package/mina-request?activeTab=code

官方文档
https://open.feishu.cn/document/uAjLw4CM/uYjL24iN/block/api/network/request

相关推荐
小咕聊编程1 小时前
【含文档+PPT+源码】基于微信小程序农家乐美食餐厅预约推广系统
微信小程序·小程序·美食
计算机-秋大田10 小时前
基于微信小程序的电子竞技信息交流平台设计与实现(LW+源码+讲解)
spring boot·后端·微信小程序·小程序·课程设计
计算机徐师兄15 小时前
Java基于SSM框架的互助学习平台小程序【附源码、文档】
小程序·互助学习·互助学习平台小程序·java互助学习微信小程序·互助学习微信小程序·互助学习平台微信小程序
西农小陈16 小时前
Python-基于PyQt5,wordcloud,pillow,numpy,os,sys的智能词云生成器
开发语言·python·小程序·pycharm·numpy·pyqt·pillow
说私域18 小时前
开源AI智能名片2+1链动模式S2B2C商城小程序:重塑私域流量运营格局
人工智能·小程序·流量运营
Colinnian21 小时前
微信小程序中在一个大边框里给每个小边框均匀分配空间
微信小程序·小程序·notepad++
说私域2 天前
今日头条公域流量引流新径:开源 AI 智能名片 2 + 1 链动模式 S2B2C 商城小程序融合之道
人工智能·小程序
曾经的三心草2 天前
小程序-基础加强
小程序·基础加强
说私域2 天前
智能调度体系与自动驾驶技术优化运输配送效率的研究——兼论开源AI智能名片2+1链动模式S2B2C商城小程序的应用潜力
人工智能·小程序·自动驾驶
说私域2 天前
开源2+1链动模式AI智能名片S2B2C商城小程序:利用用户争强好胜心理促进分享行为的策略研究
人工智能·小程序·开源