## 一、uni-app中調取接口的三種方式 #### 1、uni.request({}) ``` uni.request({ url:'/api/getIndexCarousel.jsp', method:'get', success:res=>{ console.log(res.data); this.carouselData = res.data } }) ``` #### 2、uni.request({}).then() ``` uni.request({ url:'/api/getIndexCarousel.jsp', method:'get', }).then((result)=>{ let [error,res] = result; //result將返回一個數組[error,{NativeData}] //NativeData：調取接口后返回的原生數據 if(res.statusCode === 200){ this.carouselData = res.data } if(res.statusCode === 404){ console.log('請求的接口沒有找到'); } }) ``` #### 3、async/await ``` async：用在函數定義的前面 async request(){ //函數體;} await：用在標明了async關鍵字的函數內部，異步操作的前面。 ``` ``` onLoad() { this.request(); }, methods: { async request(){ let result = await uni.request({ url:'/api/getIndexCarousel.jsp' }) console.log(result) let [err,res] = result; if(res.statusCode === 200){ this.carouselData = res.data; } } } ``` ## 二、封裝uni.request(); #### 1、創建一個對象，將該對象掛在Vue的原型下 新建`@/common/request.js`文件 初步寫法（僅供參考）： ``` export default { request(options){ uni.request({ ...options, success:res=>{ console.log(res) } }) }, get(url,data={},options={}){ options.url=url, options.data=data, options.method='get', this.request(options) }, post(url,data={},options={}){ options.url=url, options.data=data, options.method='post', this.request(options) } } ``` 二次更改： ``` export default{ //封裝uni.request()： request(options){ return new Promise((resolve,reject)=>{ //書寫異步操作的代碼 uni.request({ ...options, success:res=>{ if(options.native){ resolve(res) //調取接口后返回的原生數據 } if(res.statusCode === 200){ resolve(res.data) //異步操作執行成功 }else{ console.log('請求的接口沒有找到'); reject(res) //異步操作執行失敗 } } }) }) }, get(url,data={},options={}){ options.url=url; options.data=data; options.method='get'; return this.request(options) }, post(url,data={},options={}){ options.url=url; options.data=data; options.method='post'; return this.request(options) } } ``` #### 2、進入main.js文件 ``` import request from '@/common/request.js'; Vue.prototype.$Z = request; ``` 例：在任意文件中書寫下列代碼可以調用。`this.$Z.get();` #### 3、在頁面中調用 ``` //封裝uni.request()： this.$Z.get('/api/getIndexCarousel.jsp',{},{ native:false }).then(res=>{ //異步操作成功 console.log(res) }).catch(res=>{ //異步操作失敗 console.log(res) }).finally(res=>{ //異步操作完成 }); ```