微信小程序封装请求-CFANZ编程社区

封装请求

解决的问题

很多页面中请求的url前半部分都是一样的，重复书写导致页面代码冗余复杂同时逻辑容易不清晰，所以采用单独将请求封装成一个文件（模块）使得这些问题得到解决。

前期基础知识

uni.request（wx.request）
Promise

具体步骤

创建文件夹及文件

在根目录下创建一个文件夹，名为utils（可自行修改），在此文件夹下新建一个名为request.js（可自行修改）的文件。

分析`request`请求基本参数

url：请求地址

一般url都是有一个固定前缀(域名)，只是后面不同。

https://xfxuezhang.cn:8080/village/v1/media/activity/newest
 https://xfxuezhang.cn:8080/village/v1/media/activity/detail
 https://xfxuezhang.cn:8080/village/v1/user/login
 ......

设置一个全局常量baseUrl用来存储前缀。

const baseUrl = "https://xfxuezhang.cn:8080/village/v1/";

method：请求方法

const GET = 'GET';
const POST = 'POST';
const PUT = 'PUT';
const FORM = 'FORM';
const DELETE = 'DELETE';

header：请求头部

header的话根据method设置就行，默认如下。

let header = {
  'content-type': 'application/json' 
};

data：请求携带参数

GET请求直接传就可以。
POST请求需要JSON.stringify(data)处理一下。

开始编写封装代码

编写请求的基本参数

const GET = 'GET';
const POST = 'POST';
const baseUrl = 'https://xfxuezhang.cn:8080/village/v1/';

编写request函数封装请求

function request(method, url, data) {
  return new Promise((resolve, reject) => {
    let header = {
        'content-type': 'application/json' 
    };
    uni.request({
      url: baseUrl + url,
      method: method,
      header: header,
      data: method === POST ? JSON.stringify(data) : data,
      success: (res) => {
        if(res.data.code === 0){
          resolve(res);
        } else {
          reject('运行时错误,请稍后再试');
        }
      },
      fail: (err) => {
        reject(err);
      }
    })
  })
}

创建多个请求

const Api = {
  getActivity: (data) => request(GET, 'media/activity/detail', data),
  getsiwper: () => request(GET, 'media/activity/newest'),
  login: (data) => request(POST, 'user/login', data),
  ......
};

导出Api

module.exports = {
  Api
}
// 或者
module.exports = {
  Api:Api
}

完整版代码

const GET = 'GET';
const POST = 'POST';
const baseUrl = 'https://xfxuezhang.cn:8080/village/v1/';

function request(method, url, data) {
  return new Promise((resolve, reject) => {
    let header = {
        'content-type': 'application/json' 
    };
    uni.request({
      url: baseUrl + url,
      method: method,
      header: header,
      data: method === POST ? JSON.stringify(data) : data,
      success: (res) => {
        if(res.data.code === 0){
          resolve(res);
        } else {
          reject('运行时错误,请稍后再试');
        }
      },
      fail: (err) => {
        reject(err);
      }
    })
  })
}
const Api = {
  getActivity: (data) => request(GET, 'media/activity/detail', data),
  getsiwper: () => request(GET, 'media/activity/newest'),
  login: (data) => request(POST, 'user/login', data),
  
};
module.exports = {
  Api
}

编写使用（引用）代码

以获取轮播图接口为例，在其他.js文件里引入request.js下的Api。

const $api = require('../../utils/request.js').Api;
Page({
    data: {},
    onLoad() {
        this.loadData();
        $api.getsiwper().then((res) => {
            console.log(res.data);
            this.swiperList = res.data.data;
        })
        .catch((error) => {
            console.log(error);
        });
    }
})