微信小程序网络请求模块封装的具体实现

下面是关于微信小程序网络请求模块封装的具体实现的攻略。

1. 基础知识

在封装微信小程序网络请求模块之前，需要掌握以下知识：

1. 熟悉微信小程序框架，了解小程序的生命周期、页面页面跳转方式和数据绑定方式。
2. 熟悉微信小程序网络请求的基础知识，包括请求方式以及请求参数。
3. 熟悉Promise异步编程的基础知识，理解异步和同步的区别以及Promise的基本用法。

2. 封装微信小程序网络请求模块

在封装微信小程序网络请求模块的过程中，主要分为以下几个步骤：

2.1 创建请求类

首先需要创建一个请求类，该类包含以下方法：

• request(options)：发起网络请求，返回Promise对象。
• getToken()：获取token。
• saveToken(token)：保存token。

下面是请求类的代码示例：

const baseUrl = 'https://example.com/api/';

class Request {
  request(options) {
    return new Promise((resolve, reject) => {
      const token = this.getToken();
      const header = {
        'content-type': 'application/json',
        'Authorization': 'Bearer ' + token
      };

      wx.showLoading({
        title: '加载中'
      });

      wx.request({
        url: baseUrl + options.url,
        method: options.method || 'GET',
        data: options.data || {},
        header: header,
        success(res) {
          resolve(res.data)
        },
        fail(err) {
          reject(err)
        },
        complete() {
          wx.hideLoading();
        }
      })
    })
  }

  getToken() {
    return wx.getStorageSync('token');
  }

  saveToken(token) {
    wx.setStorageSync('token', token);
  }
}

export default Request;

2.2 封装get和post请求方法

在请求类中，需要封装get和post请求方法，这两个方法调用了request()方法，并传递相应的参数，具体代码如下：

const baseUrl = 'https://example.com/api/';

class Request {
  request(options) {
    // ... 
  }

  get(url, data) {
    return this.request({url, data});
  }

  post(url, data) {
    return this.request({url, data, method: 'POST'});
  }

  getToken() {
    // ...
  }

  saveToken(token) {
    // ...
  }
}

export default Request;

2.3 注册请求拦截器和响应拦截器

为了方便处理请求和响应，可以注册请求拦截器和响应拦截器，这样可以更方便地处理请求和响应。代码示例如下：

const baseUrl = 'https://example.com/api/';

class Request {
  constructor() {
    this.interceptors = {
      request: (config) => {
        // 发送请求之前的拦截器
        const token = this.getToken();
        if (token) {
          config.header['Authorization'] = 'Bearer ' + token;
        }
        return config;
      },
      response: (response) => {
        // 响应之后的拦截器
        if (response.statusCode === 401) {
          // 处理token过期的情况
          this.saveToken(null);
          wx.navigateTo({
            url: '/pages/login/login'
          });
          return;
        }
        return response;
      }
    }
  }

  request(options) {
    // 发送请求前的处理
    let config = Object.assign({}, options);
    config = this.interceptors.request(config);
    return new Promise((resolve, reject) => {
      wx.showLoading({
        title: '加载中'
      });
      wx.request({
        url: baseUrl + config.url,
        method: config.method || 'GET',
        data: config.data || {},
        header: config.header || {'content-type': 'application/json'},
        success(res) {
          resolve(res);
        },
        fail(err) {
          reject(err);
        },
        complete() {
          wx.hideLoading();
        }
      })
    }).catch((res)=>{
      console.log(res);
      this.handleError(res);

      return Promise.reject(res);
    })
    .then(this.interceptors.response, this.interceptors.response)
    .catch(this.handleError);
  }

  get(url, data) {
    return this.request({url, data});
  }

  post(url, data) {
    return this.request({url, data, method: 'POST'});
  }

  handleError(err) {
    console.error('网络请求错误:', err);
  }

  getToken() {
    return wx.getStorageSync('token');
  }

  saveToken(token) {
    wx.setStorageSync('token', token);
  }
}

export default Request;

3. 实例说明

下面是两个使用该网络请求模块的实例：

3.1 调用get请求

import Request from './utils/request';

const request = new Request();

Page({
  onLoad() {
    request.get('example')
      .then((res) => {
        console.log(res);
      })
      .catch((err) => {
        console.error(err);
      });
  }
})

在页面的onLoad()生命周期函数中调用了request.get()方法来发起get请求。

3.2 调用post请求

import Request from './utils/request';

const request = new Request();

Page({
  onFormSubmit(e) {
    request.post('example', e.detail.value)
      .then((res) => {
        console.log(res);
      })
      .catch((err) => {
        console.error(err);
      });
  }
})

在页面的表单提交事件中调用了request.post()方法来发起post请求。其中e.detail.value是表单的数据。