zoukankan      html  css  js  c++  java
  • uni-app封装网络请求

    在项目下创建一个文件夹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
    
    作者:流年少年
    出处:https://www.cnblogs.com/ishoulgodo/

    想问问题,打赏了卑微的博主,求求你备注一下的扣扣或者微信;这样我好联系你;(っ•̀ω•́)っ✎⁾⁾!

    如果觉得这篇文章对你有小小的帮助的话,记得在右下角点个“推荐”哦,或者关注博主,在此感谢!

    万水千山总是情,打赏5毛买辣条行不行,所以如果你心情还比较高兴,也是可以扫码打赏博主(っ•̀ω•́)っ✎⁾⁾!

    想问问题,打赏了卑微的博主,求求你备注一下的扣扣或者微信;这样我好联系你;(っ•̀ω•́)っ✎⁾⁾!

    支付宝
    微信
    本文版权归作者所有,欢迎转载,未经作者同意须保留此段声明,在文章页面明显位置给出原文连接
    如果文中有什么错误,欢迎指出。以免更多的人被误导。
  • 相关阅读:
    ctfhub技能树—信息泄露—备份文件下载—vim缓存
    ctfhub技能树—信息泄露—备份文件下载—bak文件
    ctfhub技能树—信息泄露—备份文件下载—网站源码
    RecyclerView错误
    R.java的生成规则
    各种编译不通过xcode
    Gradle
    xcode如何运行下载的demo工程
    xcode资源管理
    IOS代码片段
  • 原文地址:https://www.cnblogs.com/ishoulgodo/p/13708413.html
Copyright © 2011-2022 走看看