uni-app教程四（uni.requet()、网络模块封装）

r囧r小猫 2022-12-13 14:13 122阅读 0赞

### 1. uni-app网络请求 ###

--------------------

uni-app题拱了uni.requet()方法，发起网络请求：

uni.request({ 
        url: 'https://ceshi2.dishait.cn/api/v1/list', //仅为示例，并非真实接口地址。
        data: { 
            text: 'uni.request'
        },
        header: { 
            'custom-header': 'hello' //自定义请求头信息
        },
        success: (res) => { 
            console.log(res.data);
            this.text = 'request success';
        }
    });

**注意：**

> 在各个小程序平台运行时，网络相关的 API 在使用前需要配置域名白名单。

**data 数据说明**

最终发送给服务器的数据是 String 类型，如果传入的 data 不是 String 类型，会被转换成 String。转换规则如下：

*  对于 **GET** 方法，会将数据转换为 query string。例如`{ name: 'name', age: 18 }` 转换后的结果是`name=name&age=18`。
 *  对于 **POST** 方法且 `header['content-type']` 为`application/json`的数据，会进行 JSON 序列化，是默认值。
 *  对于 POST 方法且`header['content-type']`为 `application/x-www-form-urlencoded` 的数据，会将数据转换为 query string。

### 2. uni.request()未封装VUE组件中的使用 ###

--------------------

getList:function(){ 
        var _self=this;
        var token = uni.getStorageSync(_self.sessionKey);
        uni.request({ 
            url: 'https://ceshi2.dishait.cn/api/v1',
            method: 'GET',
            data: { 
                token : token,
                timestamp : timestamp
                       },
            success: res => { 
                if (res.data.code == "401") { //登录失效
                    //弹框提示
                    uni.showToast({ 
                        title: res.data.msg,
                        mask: false,
                        duration: 1500
                    });
                } else if (res.data.code == "0") { 
                    var data = res.data.data;
                    _self.onlineNum = data.onlineNum;
                    _self.machineNum = data.machineNum;
                }else { 
                    console.log("未处理的结果码");
                }
                        
            },
            fail: (e) => { 
                console.log("getMachineNum fail:" + JSON.stringify(e));
            },
            complete: () => { }
        });
    },

返回结果：

{ 
      "data": { 
        "code": "0",
        "msg": "success",
        "data": { 
          "machineNum": 124,
          "onlineNum": 1,
          
        }
      },
      "header": { 
        "Server": "nginx/1.14.0",
        "Date": "Thu, 11 Apr 2019 03:08:20 GMT",
        "Content-Type": "application/json;charset=utf-8;",
        "Transfer-Encoding": "chunked",
        "Connection": "keep-alive",
        "X-Powered-By": "PHP/7.1.16"
      },
      "statusCode": 200,
      "cookies": [],
      "errMsg": "request:ok"
    }

### 3.uniapp封装网络请求 ###

--------------------

**1. 我们先通过Promise进行一次简单封装,新建request.js文件：**

//options参数我们后面会说
    function service(options = { }) { 
    return new Promise((resolved, rejected) => { 
    uni.request({ 
       url: options.url, //仅为示例，并非真实接口地址。
       data: options.data,
       header: { 
           'content-type': 'application/x-www-form-urlencoded',
           'token': `${ token}` //权限token 
       },
       success: (res) => { 
          rejected(res.data);
       }.fail = (err) => { 
       rejected(err)
     }
    });
    }
    }
    export default service;

**2. 在common目录下新建config.js**  
放置我们的多环境变量，方便后期切换环境

export default { 
    	// api请求前缀
    	// webUrl : 开发环境前缀,
    	webUrl:'https://ceshi2.dishait.cn/api/v1',
    	//testUrl : 测试环境前缀
    	testUrl:'https://ceshi3.dishait.cn/api/v1',
    	//proUrl : 生产环境前缀
    	proUrl:'https://ceshi.dishait.cn/api/v1',
    	// websocket地址
    	websocketUrl:"wss://ceshi2.dishait.cn/wss",
    }

现在目录如下:

┌─common
    │ ├─config.js //请求
    │ ├─request.js //请求
    ┌─pages
    │ ├─index
    │ │ └─index.vue //页面文件
    ├─static
    ├─store
    │ ├─index.js //vuex
    ├─main.js
    ├─App.vue
    ├─manifest.json
    └─pages.json

**3. 接下来我们对requst.js进行一次优化。**

//把配置项单独处理
    
    import $C from '@/common/config.js'; // 引入baseUrl
    import $store from '@/store/index.js';//vuex
    
    export default { 
        //定义默认请求参数
    	common:{ 
    		method: 'GET',
    		header:{ 
    			"content-type":"application/json"
    		},
    		data:{ }
    	},
    	request(options = { }){ 
    		options.url = $C.webUrl + options.url
    		options.method = options.method || this.common.method
    		options.header = options.header || this.common.header
    		
    		// 验证权限token
    		if(options.token){ 
    			options.header.token = $store.state.token
    			if(!options.header.token){ 
    				return uni.showToast({ 
    					title: '非法token,请重新登录',
    					icon: 'none'
    				});
    			}
    		}
    		
    		return new Promise((res,rej)=>{ 
    			uni.request({ 
    				...options,
    				
    				success: (result) => { 
    					// 返回原始数据
    					// console.log(result);
    					if(options.native){ 
    						return res(result)
    					}
    					// 请求服务端失败
    					if (result.statusCode !== 200 && !options.notoast) { 
    						uni.showToast({ 
    							title:result.data.msg || '请求失败',
    							icon: 'none'
    						});
    						return rej(result.data)
    					}
    					// 成功
    					res(result.data.data)
    				},
    				fail:(error)=>{ 
    					uni.showToast({ 
    						title: error.errMsg || '请求失败',
    						icon: 'none'
    					});
    					return rej()
    				}
    			});
    		})
    	},
    	// 单独封装 get 方式请求
    	get(url,data = { },options = { }){ 
    		options.url = url
    		options.data = data
    		options.method = 'GET'
    		return this.request(options)
    	},
    	// 单独封装 post 方式请求
    	post(url,data = { },options = { }){ 
    		options.url = url
    		options.data = data
    		options.method = 'POST'
    		return this.request(options)
    	},
    	// 单独封装 文件上传 方式请求 ,不需要则可以暂时不封装
    	upload(url,options = { }){ 
    		options.url = $C.webUrl + url
    		options.header = options.header || { }
    		// 验证权限token
    		if(options.token){ 
    			options.header.token = $store.state.token
    			if(!options.header.token){ 
    				return uni.showToast({ 
    					title: '非法token,请重新登录',
    					icon: 'none'
    				});
    			}
    		}
    		
    		return new Promise((res,rej)=>{ 
    			uni.uploadFile({ 
    				...options,
    				success: (uploadFileRes) => { 
    					if(uploadFileRes.statusCode !== 200){ 
    						return uni.showToast({ 
    							title: '上传图片失败',
    							icon: 'none'
    						});
    					}
    					let data = JSON.parse(uploadFileRes.data)
    					res(data)
    				},
    				fail:(err)=>{ 
    					rej(err)
    				}
    			});
    		})
    		
    	}
    }

**4. 在main.js总，导入request.js ,并挂载到Vue原型上。**

// 引入请求库
    import $H from './common/request.js';
    Vue.prototype.$H = $H

1.  组件使用，login.vue

<template>
    	<view>
    	
    		<view class="text-center" style="padding-top: 130rpx;padding-bottom: 70rpx;font-size: 55rpx;">账号密码登录</view>
    		
    		<view class="px-2">
    			<template>
    				<view class="mb-2">
    					<input type="text" v-model="username" placeholder="昵称/手机号/邮箱" class="border-bottom p-2"/>
    				</view>
    				<view class="mb-2 flex align-stretch">
    					<input type="text" v-model="password" placeholder="请输入密码" class="border-bottom p-2 flex-1"/>
    					<view class="border-bottom flex align-center justify-center font text-muted" style="width: 150rpx;">忘记密码？</view>
    				</view>
    			</template>
    			
    		</view>
    		
    		<view class="py-2 px-3">
    			<button class="text-white" style="border-radius: 50rpx;border: 0;" type="primary" :disabled="disabled" :class="disabled ? 'bg-main-disabled':'bg-main'" @click="submit" :loading="loading"> 登录 </button>
    		</view>
    		
    		<view class="flex align-center justify-center pt-2 pb-4">
    			<view class="text-primary font-sm" @click="changeStatus">
    				{
       {status?'账号密码登录':'验证码登陆'}}
    			</view>
    			<text class="text-muted mx-2">|</text>
    			<view class="text-primary font-sm">登录遇到问题</view>
    		</view>
    		
    		<view class="flex align-center justify-center">
    			<view style="height: 1rpx;background-color: #dddddd;width: 100rpx;"></view>
    			<view class="mx-2 text-muted">社交账号登录</view>
    			<view style="height: 1rpx;background-color: #dddddd;width: 100rpx;"></view>
    		</view>
    		
    		
    		<view class="flex align-center justify-center text-muted">
    			注册即代表同意<text class="text-primary">《xxx社区协议》</text>
    		</view>
    		
    	</view>
    </template>
    
    <script> export default { components: { }, data() { return { username:"", password:"" } }, methods: { // 提交 submit(){ let data ={ username:this.username, password:this.password } // 提交后端 this.$H.post(url,data).then(res=>{ console.log(res); // 修改vuex的state,持久化存储 this.$store.commit('login',res) uni.showToast({ title: '登录成功', icon: 'none' }); }).catch(err=>{ // 登录失败 console.log('登陆失败') }) } } } </script>
    
    <style> </style>

最终效果：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzYzODk2OA_size_16_color_FFFFFF_t_70_pic_center_300x780]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzYzODk2OA_size_16_color_FFFFFF_t_70_pic_center_300x780]: /images/20221123/649b8f56c2054e9987ddb6c9167a51f5.png