uni-app封裝網路請求
阿新 • • 發佈:2020-09-21
在專案下建立一個資料夾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