微信小程序封装request请求

前言

在小程序(其他)开发过程中,我们会遇到很多请求,如果每次都去写一遍

wx.request({
  url: 'test.php', // 仅为示例，并非真实的接口地址
  data: {
    x: '',
    y: ''
  },
  header: {
    'content-type': 'application/json' // 默认值
  },
  success(res) {
    console.log(res.data)
  },
  fail(err){
    console.log(err)  
  }
})

烦不烦,气不气
尤其是同一个接口好几个地方都要使用,有一点变动就需要全部找出来一个一个改
很不方便维护

所以我们就封装一下,统一管理吧~

准备

在开始之前你需要了解
1.wx.request戳我了解
2.Promise戳我了解

封装

准备完成后开始撸代码
首先我们看下request的基本参数

url(请求地址)
一般url都是有一个固定前缀(域名),只是后面不同
例如:

https://some-domain.com/api/test1
https://some-domain.com/api/test2
https://some-domain.com/api/test3
https://some-domain.com/api/test4
...

所以我们设置一个全局常量baseUrl用来存储前缀

const baseUrl='https://some-domain.com/api/'

2.method(HTTP 请求方法)
这里不多做解释

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

3.header(请求header)
header的话根据method设置就行了,默认

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

4.data(参数)
get请求直接传就可以了
post请求JSON.stringify(data)一下

封装代码

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

const baseURL = 'https://some-domain.com/api/';

function request(method, url, data) {
    return new Promise(function(resolve, reject) {
        let header = {
            'content-type': 'application/json',
        };
        wx.request({
            url: baseURL + url,
            method: method,
            data: method === POST ? JSON.stringify(data) : data,
            header: header,
            success(res) {
                //请求成功
                //判断状态码---errCode状态根据后端定义来判断
                if (res.data.errCode == 0) {
                    resolve(res);
                } else {
                    //其他异常
                    reject('运行时错误,请稍后再试');
                }
            },
            fail(err) {
                //请求失败
                reject(err)
            }
        })
    })
}

已经等封装完成,那么该如何使用呢?

1.在小程序util文件夹下新建api.js,并将上述代码放进去
然后创建请求,并导出

//衔接上面代码


const API = {
    getOpenid: (data) => request(GET, `jsapi/mini?jsCode=${data}`),
};
module.exports = {
    API: API
}

2.这里我么以获取openid接口为例
在.js文件里引入api.js下的API

const $api = require('../../utils/api.js').API;
Page({
    data: {},
    onLoad: function (options) {
        wx.login({
            success:res=> {
                // 调用接口获取openid
                $api.getOpenid(res.code)
                    .then(res => {
                       //请求成功
                    })
                    .catch(err => {
                       //请求失败
                    })
            }
        })
    }
})