uni-app封装网络请求

标签：挂载   config   room   开关   失败   data   iap   请求   隐藏   

在项目下创建一个文件夹https

然后在文件夹下面创建两个文件api.js  request.js
api.js 用于存放项目的请求接口
request.js  用于存放封装的请求接口get post

在static下创建文件appConfig.js

这个文件用于配置项目的配置项或者说是配置开关
可以配置请求的基础路径
有些部分在开发中 ，隐藏起来，展示不对外进行展示；

const appConfig = {
	baseUrl: ‘https://api.ecscc.net‘, //基础路径
}
export default appConfig

request.js

import appConfig from "../static/appConfig.js"
export  function apiapi(networkUrl,methodsWay,dataCont,util){
	// 默认为开启错误提示
	if(util == undefined) {
		util = {
			showError: true,//开启错误提示
		}
	}
	return new Promise((resolve,reject)=>{
		uni.request({
			url: appConfig.baseUrl+networkUrl, //由基础路径和接口地址
			method:methodsWay||"GET",//请求的方式必须大写
			data:dataCont||{},//参数
			header: {
				// 这里等会会配置下？？？？？？？？？？？？？？？？？？？？？？？？？还有token
				‘Content-Type‘: ‘application/json‘,
				‘Authorization‘:"携带的token"
			},
			// 成功使用resolve
			success: (res) => {
				if(res.data&&res.data.success){
					resolve(res)
				}else{
					/**
					 * 请求失败，是否要提示出来;
					 * showError: true,开启错误提示
					 *  showError: false,关闭错误提示
					 * */ 
					if(util.showError){
						showError(res);
					}
					resolve(res)
				}
			},
			//失败调用reject，
			fail:(err)=>{
				// 失败做处理
				if(util.showError){
					showError(res);
				}
				reject(err)
			}
		});
	})
}

// 错误处理
const showError = (error) => {
	if(error){
		switch (error.data.code) {
			case 401:
			uni.showToast({
				title: ‘没有权限‘,
				icon:‘none‘,
				duration: 1000
			});
			break;
			
			case 403:
			uni.showToast({
				title: ‘拒绝访问‘,
				icon:‘none‘,
				duration: 1000
			});
			break;
			
			case 404:
			uni.showToast({
				title: ‘很抱歉，资源未找到!‘,
				icon:‘none‘,
				duration: 1000
			});
			break;
			
			case 500:
			uni.showToast({
				title: ‘没有权限‘,
				icon:‘none‘,
				duration: 1000
			});
			break;
			
			case 502:
			uni.showToast({
				title: ‘服务器异常‘,
				icon:‘none‘,
				duration: 1000
			});
			break;
			
			case 504:
			uni.showToast({
				title: ‘网络超时‘,
				icon:‘none‘,
				duration: 1000
			});
			break;
			
			default:
			uni.showToast({
				title:"网络错误",
				icon:‘none‘,
				duration: 1000
			});
			break
		}
	}
}

api.js

这里导入的时候，只能够是apipi，因为你暴露的时候，就是apiapi;
当然你也可以使用别名去修改名称

import  {apiapi}  from "./request.js"

/**
 * 请求的方式大写
 * */ 

export const listArrlist= (params,util)=>apiapi(‘/api/userInfo/teacherInfo/getTeacherClassValue‘, ‘GET‘,params,util);

export const demo2= (params)=>apiapi(‘/school/campusPro/getWeatherByOrgId‘, ‘POST‘,params);

// 这一句等价于
// const demo2=function(params){
//    return	apiapi(‘/school/campusPro/getWeatherByOrgId‘, ‘POST‘,params)
// }
// export  demo2

在项目中如何使用
index.vue

引入(我这里是进行按需引入的）
import  {listArrlist, demo2} from "../../https/api.js"

created(){
      this.roomMettingGrantApi();
      this.hospitalIconNmaeScroolApi();
},
		
	
		
methods: {
roomMettingGrantApi(){
	demo2().then(res=>{

	})
},
			
   // 医院图标  医院姓名  滚动
   hospitalIconNmaeScroolApi(){
	   demo2().then(res=>{
        })
   },
 }

展示先写在这里；
后面会继续跟新的哈~~!

有些同学不喜欢按需引入的话
可以直接挂载在原型上的哈

在main.js中进行挂载的~
参考 https://www.cnblogs.com/ishoulgodo/p/12805699.html

uni-app封装网络请求

标签：挂载   config   room   开关   失败   data   iap   请求   隐藏   

原文地址：https://www.cnblogs.com/ishoulgodo/p/13708413.html