uni.request本身已经是基于promise了,也可以用async/await,为啥还要进行封装呢?
1、封装成一个方法后,以后想要发送请求就直接调用这个方法,这样所有的请求都走这个方法,就可以对所有的请求做一个拦截,
2、另外,接口的域名不管要使用多少次都是一样的,难以维护,
异步处理的封装通过promise比较好。
const BASE_URL = 'http://localhost:8082' // 通过export向外暴露一个方法,方法名叫myRequest,调用myRequest方法时会向方法中传递一个对象options export const myRequest = (options)=>{ return new Promise((resolve,reject)=>{ // 异步处理的封装通过promise比较好,并且要return出去, uni.request({ // 在回调函数中处理异步请求 url: BASE_URL + options.url, // 将接口地址分为两部分,这样如果域名改变了好维护,接口地址从options中获取 method: options.method || 'GET', // 方法从options中获取,如果没有传入method,则默认为GET, data: options.data || {}, // data从options中获取,如果没有传入data, 则默认一个空对象 success: (res) => { // 用箭头函数,res是返回来的数据 if(res.data.status !== 0){ // 如果请求失败,则给一个提示 return uni.showToast({ title: '获取数据失败!' }) } resolve(res) //如果请求成功,调用resolve返回数据 }, fail: (err)=>{ // err 是返回来的错误信息 uni.showToast({ // 给一个消息提示 title: '请求接口失败!' }) reject(err) // 调用reject方法把错误消息返回出去 } }) }) }
这个方法可能每个页面都会用到,我们可以在main.js中引入,
import { myRequest } from './util/api.js'
接收之后,挂载到全局,这样所有的页面都可以调用这个方法
Vue.prototype.$myRequest = myRequest
使用方法:使用this.$myRequest进行调用
onLoad() { this.getSwipers() }, methods: { // 获取轮播图数据 async getSwipers(){ // uni.request({ // url: 'http://localhost:8082/api/getlunbo', // method: 'get', // success:(res)=>{ // console.log(res) // if(res.data.status !== 0){ // return uni.showToast({ // title: '获取数据失败!' // }) // } // this.swipers = res.data.message // // } // }) const res = await this.$myRequest({url: '/api/getlunbo'}) console.log(res) this.swipers = res.data.message } }