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