uni-app - 封装请求（简易）

本是古典何须时尚 2022-12-20 05:42 176阅读 0赞

## 前言 ##

> 这里封装的够基本使用，如果你想追求更好的，请使用相关库。

有时候，我们需要将请求封装起来，原因是很可能每次请求接口在 `HEADS` 头部携带 `token`，或 `data` 携带证书密钥（`token` \+ 字符串 + 时间戳），如果不封装起来，每次请求都需要重复来写。

## 代码 ##

打开 `main.js` 加入以下代码：

// 将 $http 挂载到 Vue 原型上，你可以在页面中直接 this.$http 调用。
    // 当然你也可以放到其他 js 文件里，只不过每次使用你都需要 import。
    
    // method - 方法 - String : 如 POST
    // url - 根域名 - String ：如 'user/login'
    // data - 数据 - Object : 如 {phone: '131'}
    // success - 成功回调 - Function : function(res){ ... }
    // fail - 失败回调 - Function : function(err){ ... }
    
    Vue.prototype.$http = function(method, url, data, success, fail) { 
    	
    	// 获取this(因为页面中需要这么做)
        var that = this;
        try { 
            if (data !== null) { 
            	// 这里你可以绑定在 data 上一些数据(比如证书签名)
            	// [ 方便每次请求都携带 ]
                // data.uid = uni.getStorageSync('uid');
                // data = that.createMsg(data);// 签名(生成签名的函数为createMsg)
            }
            uni.request({ 
                method: method,
                url: 'https://api.xxx.com/' + url,//根域名不同
                data: data,
                header: { 
                	// 在这里你可以配置携带在 HEADS 头部的信息
                	// 比如常见 token
                	token: '2dsfd234'
                    //token: uni.getStorageSync('token')
                },
    			// 成功回调(传入一个匿名函数即可 function(res){ ... })
                success: success,
                complete: function(res) { 
                    uni.stopPullDownRefresh();
                    // 这里自己配置失败后的事情
                    if (res.statusCode !== 200) { 
                        uni.showToast({ 
                            title: "Error:服务请求失败",
                            mask: false,
                            duration: 1500,
                            icon:"none"
                        });
                    }
                }
            });
        } catch (e) { }
    }

## 使用 ##

比如，获取验证码，在 `methods` 方法中，直接使用即可。

/* * 获取验证码 * @param {String} phone - 手机号 * @return void */
    getCode: function() { 
    	
    	this.$http( 'POST', 'v1/user/login',
    		{  phone:'13333333333', password:'123456'},
    		function(res){ 
    			console.log(res)
    		}
    	)
    	
    },