index.vue 轮播图
    在根目录新建until目录;

    1. //封装的方法api.js
    3. //定义变量
    4. const BASE_URL = 'http://localhost:8082'
    6. export const myRequest = (options)=>{
    7.     //这是一个方法
    9.     return new Promise((resolve,reject)=>{
    10.         uni.request({
    11.             url:BASE_URL+options.url,
    12.             method:options.method || 'GET',
    13.             data:options.data || {},  //不传就是为空
    14.             success:(res)=> {
    15.                 if(res.data.status !== 0){
    16.                     return uni.showToast({
    17.                         title:'获取数据失败'
    18.                     })
    19.                     }
    20.                     resolve(res)
    21.             },
    22.             //一旦请求失败
    23.             fail:(err)=>{
    24.                 uni.showToast({
    25.                     title:'请求接口失败'
    26.                 })
    27.                 reject(err)
    28.             }
    29.         })
    30.     })
    31. }
    33. //调用方法
    34. myRequest({
    35.     url:'/api/getlunbo'
    36. })

    index.vue代码

    1. <template>
    2.     <view>
    3.         首页
    4.     </view>
    5. </template>
    7. <script>
    8.     export default {
    9.         data() {
    10.             return {
    11.                 swipers:[]
    12.             }
    13.         },
    14.         onLoad() {    //监听页面加载    
    15.             this.getSwiper()
    16.         },
    17.         methods: {
    18.             //获取轮播的数据
    19.             // async getSwiper(){
    20.             //     console.log('获取轮播的数据')
    21.             //     const res = await uni.request({
    22.             //         url:'http://localhost:8082/api/getlunbo',
    23.             //     })
    24.             //     console.log(res.data)
    25.             // }
    28.             //获取轮播数据
    29.             async getSwiper(){
    30.                 // console.log('获取轮播的数据')
    31.                 // uni.request({
    32.                 //     url:'http://localhost:8082/api/getlunbo',
    33.                 //     success:res=>{
    34.                 //         console.log(res.data.message)
    35.                 //         if(res.data.status !== 0){
    36.                 //             return uni.showToast({
    37.                 //                 title:'获取数据失败'
    38.                 //             })
    39.                 //         }
    40.                 //         this.swipers = res.data.message
    41.                 //     }
    42.                 // })
    43.                 const res =await this.$myRequest({
    44.                     url:'/api/getlunbo'
    45.                 })
    46.                 this.swipers = res.data.message
    47.             }
    48.         }
    49.     }
    50. </script>
    52. <style>
    54. </style>

    程序中的async和 await 是成对使用的。
    因为要全局使用

    1. import Vue from 'vue'
    2. import App from './App'
    4. //全局方法
    5. import { myRequest} from './util/api.js'
    6. Vue.prototype.$myRequest = myRequest   //全局方法
    8. Vue.config.productionTip = false
    10. App.mpType = 'app'
    12. const app = new Vue({
    13.     ...App
    14. })
    15. app.$mount()