uni-app封装$myRequest 方法并挂载到全局(黑马商城)

封装:

// 新建目录util  目录下api.js
const BASE_URL = 'http://localhost:8080';

export const myRequest = (options) => {
    return new Promise((resolve,reject)=>{
        uni.request({
            url:BASE_URL+options.url,
            method:options.method || "GET",
            data:options.data || {},
            success:(res)=>{
                if(res.data.status !== 0){
                    return uni.showToast({
                        title:"获取数据失败"
                    })
                }
                resove(res)
            },
            fail:(err)=>{
                return uni.showToast({
                    title:"请求接口失败"
                })
                reject(err)
            }
        })
    })
}

// myRequest({
//     url:'/api/getlunbo',
//     method:"POST",
//     data:{
        
//     },
// })

几乎每个页面都会使用,则通过入口文件main.js引入

// main.js
import Vue from 'vue' import App from './App' import {myRequest} from './util/api.js' //引入 Vue.prototype.$myRequest = myRequest //通过Vue.prototype挂载至全局 Vue.config.productionTip = false App.mpType = 'app' const app = new Vue({ ...App }) app.$mount()

使用:

methods: {
            //获取轮播图数据
       (1)// getSwipers(){
            //     uni.request({
            //         url:'../../common/util.json',
            //         success:res=>{//             this.swiper= res.data.message
            //         }
            //     })
            // },
    (3)
async getSwipers (){ const res = await this.$myRequest({ url:'/api/getlunbo' }) this.swiper = res.data.message }, (2)// getSwipers (){ // this.$myRequest({ // url:"/api/getlunbo" // }) //返回promise函数,可改为以上方法 通过await async进行修饰 // } }
原文地址:https://www.cnblogs.com/cdj61/p/12911208.html