小程序封装请求

最近手里有一个小程序的项目，一起来学学小程序吧,一起学习，一起进步

--------小程序的请求文件封装，该文章中存在部分引入

1.在api文件夹下新建一个request（任意起名）文件夹

2.在request文件夹下新建env.js文件

        2.1     在此文件中配置请求路径的公共部分，以便于后续使用

	//这里使用的接口呢都是自己模拟的，可以根据自己的需求进行添加
    分为三种不同的场景


    module.exports={
        //开发环境的url
        dev:{
            baseUrl:"http://xxxx"
        },
        //测试环境url
        test:{
            // baseUrl:"http://www.test.com"
        },
        //线上环境url
        prod:{
            // baseUrl:'https://api.it120.cc'
            baseUrl:"https://xxx"
        }
    }

3.新建ajax.js文件

        --3.1 引入env.js文件。

         --3.2 二次封装wx.request

// 引入env中的url

const {
    baseUrl
} = require('./env.js').dev;//上线的时候换成线上地址

module.exports = {
    /**
     * 二次封装wx.request
     * url:请求的接口地址
     * method:请求方式 GET,POST....
     *  data:要传递的参数
     * header:请求头
     */
    request: (url, method, data, header) => {
    
  
        
        let _url = `${baseUrl}/${url}`;//这里使用ES6的写法拼接的字符串
        
        return new Promise((resolve, reject) => {
            // wx.showLoading({
            //     title: '正在加载',
            // });
            wx.request({
                url: _url,
                method: method,
                data: data,
                header: header,
                success: (res) => {
                    // console.log('从接口获取到的数据', res);
                    let data = res.data;
                    if (res.statusCode == 200) {
                        // wx.hideLoading();
                        //统一拦截--------401未登录活登录已过期token过期
                        if (data.code == 401) {
                            // wx.hideLoading();
                            wx.reLaunch({
                                url: '/pages/login/login?token=0',//拼接参数--表明是401--过期的
                            })
                        }
                        if (data.code == 200) {
                            resolve(res.data);
                            // wx.hideLoading();
                            // wx.showToast({
                            //     title: '请求成功',
                            // })
                        }else {
                        // wx.hideLoading();
                        wx.showToast({
                            title: '请求有误',
                            icon: 'none'
                        })
                    }
                },
                fail() {
                    // wx.hideLoading();
                    reject('发送失败');
                    wx.reLaunch({
                        url: '/pages/login/login', //
                    })
                    wx.showModal({
                        title: '提示',
                        content: '网络错误',
                        success(res) {
                            if (res.confirm) {
                                console.log('用户点击确定');
                            } else if (res.cancel) {
                                console.log('用户点击取消');
                            }
                        }
                    })
                }
            });

        });
    },
}

4.新建http.js：在这里放的请求方法。

        4.1 引入封装的reuest请求。
        4.2 写入自己的请求方法。

//引入封装的reuest请求
const {
    request
} = require('./request.js');

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


//请求头根据自己的情况配置

//这个是发送登录请求的请求头不需要携带token
//const headerPost = {
//    'content-type': 'application/json',
//};

//这里的请求头需要携带token--但是直接在这里获取会有异步，要请求数据的地方获取存在本地的token


// const headerPostToken = {
//     'content-type': 'application/json',
//     'QS_TOKEN': app.globalData.token
// };
// const headerGet = {
//     'content-type': 'application/x-www-form-urlencoded',
//     'QS_TOKEN': wx.getStorageSync('QS_TOKEN')
// };


//基于业务封装的接口
module.exports = {

  ----POST


    certification: (data, headerPostToken) => {
        return request('comp/certification', POST, data, headerPostToken);
    },
    
    ----GET
    
    PersonalCenter: (header) => {
        console.log('api', header);
        return request('user', GET, '', header); //没有请求参数，所以为空(如果不加【'',】的话就会出错)
    },
    
    
    -----GET
       
    getShopList: (searchCode, status, header) => {
        return request('storage/list?searchCode=' + searchCode + '&status=' + status + '&page=1&limit=1000', GET, '', header);
    },
    
}

5.引入方法

//1.引入方法
const { getShopList } = require('../../request/api.js');


  // 请求产品列表
  getAllOrders(searchCode, status) {
 
    let that = this;

   //获取token---设置请求头
    var header = {
      'content-type': 'application/x-www-form-urlencoded',
      'QS_TOKEN': wx.getStorageSync('QS_TOKEN')
    };
    
    

    // 进入请求所有订单数量
    getShopList(searchCode, status, header).then(resData => {
      // console.log('请求成功----',status,'---', resData);
      if (resData.code == 200) {
        // 请求成功
        
      }
    }).catch(err => {
      // console.log(err)
    })
  },