## 一、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=>{ //异步操作完成 }); ```