uniapp 学习笔记八 使用promise方法封装post和get和put

 

homee.vue

<template>
    <scroll-view class="scroll-cont" :scroll-into-view="topItem" @scroll="handleScroll" scroll-y="true" scroll-with-animation="true">
        <view>
            <view id="top"></view>
            <!-- 自定义导航栏 -->
            <nav-custom></nav-custom>
            <!-- 轮播 -->
            <swiper class="banner" :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000">
                <swiper-item v-for="(index,item) in 3">
                    <image src="../../static/logo.png" mode=""></image>
                </swiper-item>
            </swiper>
            <home-title
                title="本季推荐" 
                en-title="Seasonal Recommend" 
                en-tit="Seasonal" 
            ></home-title>
            <scroll-view scroll-x="true" >
                <view class="scroll-inner">
                    <image src="../../static/logo.png" mode="heightFix"></image>
                    <image src="../../static/logo1.png" mode="heightFix"></image>
                    <image src="../../static/logo.png" mode="heightFix"></image>
                    <image src="../../static/logo1.png" mode="heightFix"></image>
                </view>
            </scroll-view>
            
            <home-title
                title="法式经典" 
                en-title="French Classic" 
                en-tit="French" 
            ></home-title>
            <image class="classify" src="../../static/logo.png" mode=""></image>
            
            <view class="flex flex-wrap padding-sm justify-between">
                <good-item v-for="(item,index) in 4"></good-item>
            </view>
            
            <view class="back-top" v-if="isShowGoTop" @tap="handleBackTop">
                <text class="iconfont icon-huidingbu"></text>
            </view>
        </view>
    
    </scroll-view>
</template>

<script>
    // 局部引入封装的 promise $http
    import {$http} from '@/utils/request.js'
    export default {
        data() {
            return {
                isShowGoTop:false,
                topItem:'' //返回顶部的标记点
            }
        },
        methods: {
            handleScroll(ev){
                // console.log(ev.detail);
                let {scrollTop} = ev.detail
                this.isShowGoTop = scrollTop >600
                this.topItem = '' //重置定位返回点
            },
            handleBackTop(){
                this.topItem = 'top'
            }
        },
        onLoad() {
            // 方法一
            /* uni.request({
                url: 'https://m25ygr******ed.com/1.1/classes/classify',
                method: 'GET',
                header:{                    
                    "X-LC-Id": "**********",
                    "X-LC-Key": "**********",
                    "Content-Type": "application/json", 
                },
                data: {},
                success: res => {
                    console.log(res);
                },
                fail: () => {},
                complete: () => {}
            }); */
            
            // 方法二 使用封装的到promis里面的 $http方法
            /* $http('/1.1/classes/classify').then(res=>{
                console.log(res);
            }) */
            
            // 方法三 使用全局封装的 $get方法
            this.$get('/1.1/classes/classify').then(res=>{
                console.log(res);
            })
            
        }
    }
</script>

<style lang="scss">
.back-top{
    height: 100upx;
    width: 100upx;
    background-color: #fff;
    border-radius: 50%;
    box-shadow: 0 0 10upx 4upx rgba(0, 0, 0, 0.4);
    position: fixed;
    bottom: 40upx;
    right: 20upx;
    text-align: center;
    line-height: 100upx;
}
.classify{
    height: 380upx;
    width: 100%;
}
.scroll-inner{
    white-space: nowrap;
    image{
        height: 290upx;
        width: auto;
    }
}

.banner{
    height: 1000upx;
    swiper-item{
        height: 1000upx;
    }
    image{
        width: 100%;
        height:1000upx
    }
}
.scroll-cont{
    height: 100vh;
}
</style>

main.js

局部挂载和全局挂载promise

单个挂载和批量挂载 promise

import App from './App'

// #ifndef VUE3
import Vue from 'vue'
Vue.config.productionTip = false
App.mpType = 'app'
const app = new Vue({
    ...App
})

// 全局引入uView主JS库
import uView from '@/uni_modules/uview-ui'
Vue.use(uView)

// 全局引入自定义组件
import NavCustom from '@/components/nav-custom.vue'
Vue.component('nav-custom',NavCustom)

import HomeTitle from '@/components/home-title.vue'
Vue.component('home-title',HomeTitle)

import GoodItem from '@/components/goods-item.vue'
Vue.component('good-item',GoodItem)

// 挂载全局异步请求方法(单个挂载)
/* import {$http,$get,$post,$put} from '@/utils/request.js'
Vue.prototype.$http = $http
Vue.prototype.$get = $get
Vue.prototype.$post = $post
Vue.prototype.$put = $put */

// 挂载全局异步请求方法(批量挂载request.js里面的所有方法)
import * as request from '@/utils/request.js'
for (let key in request) {
    Vue.prototype[key] = request[key]
}


app.$mount()
// #endif

// #ifdef VUE3
import { createSSRApp } from 'vue'
export function createApp() {
  const app = createSSRApp(App)
  return {
    app
  }
}
// #endif

request.js

let baseURL = 'https://m25y********ared.com'
export const $http = function(url,method='GET',data={}){
    return new Promise((resolve,reject)=>{
        uni.request({
            url: baseURL+url,
            method,
            header:{                    
                "X-LC-Id": "**********",
                "X-LC-Key": "**********",
                "Content-Type": "application/json", 
            },
            data,
            success: (res) => {
                resolve(res.data)
            },
            fail: (err) => {
                reject(err)
            },
            complete: () => {}
        });
    })
}

export const $get = function(url,data={}){
    return $http(url,'GET',data)
}

export const $post = function(url,data={}){
    return $http(url,'POST',data)
}

export const $put = function(url,data={}){
    return $http(url,'PUT',data)
}