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毛买辣条行不行,所以如果你心情还比较高兴,也是可以扫码打赏博主(っ•̀ω•́)っ✎⁾⁾!

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

支付宝
微信
本文版权归作者所有,欢迎转载,未经作者同意须保留此段声明,在文章页面明显位置给出原文连接
如果文中有什么错误,欢迎指出。以免更多的人被误导。
原文地址:https://www.cnblogs.com/ishoulgodo/p/13708413.html