1. 程式人生 > 實用技巧 >uni-app封裝網路請求

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