uniapp请求数据方法和二次封装(全面版)

页面vue文件中请求方法uni.request({ //获取信息
                url: getApp().globalData.https + '/api.php/Index/index',
                data: {},
                method: 'POST',
                header: getApp().globalData.header,
                dataType: 'json',
                success: function(res) {
                    console.log(res);
                }
            })

APP.vue 文件中设置全局变量<script>
    export default {
        globalData: {  
            text: 'text',
            https: "https://www.19870125.xyz",
            header: { 'content-type': 'application/x-www-form-urlencoded' },
          },  
        onLaunch: function() {
            console.log('App Launch')
        },
        onShow: function() {
            console.log('App Show')
        },
        onHide: function() {
            console.log('App Hide')
        }
    }
</script>

<style>
    /*每个页面公共css */
</style>

 

二次封装求取方法

新建文件夹util   文件api.js

 

 

 

const BASE_URL="https://www.19870125.xyz";  //域名抽取
const HEADER={ 'content-type': 'application/x-www-form-urlencoded' };  //头部
export const myRequest=(options)=>{
    return new Promise((resolve,reject)=>{
        uni.request({
            url:BASE_URL+options.url,
            method:options.method||'GET',
            header: HEADER,
            data:options.data||{},
            dataType: 'json',
            success:(res)=>{
                // if(res.data.status!==0){
                //     return uni.showToast({
                //         title:"获取数据失败"
                //     })
                // }
                resolve(res)
            },
            fail:(err)=>{
                reject(err);
            }
        })
    })
}

在  main.js中引用

 

 

 

import Vue from 'vue'
import App from './App'//引入
import { myRequest } from './util/api.js'
//在原型中挂载
Vue.prototype.$myRequest=myRequest;

Vue.config.productionTip = false

App.mpType = 'app'

const app = new Vue({
    ...App
})
app.$mount()

页面中使用

export default {
        data() {
            return {

            }
        },
        methods: {
            async getSwipers() {
                const res=await this.$myRequest({
                    url: '/api.php/Index/index',
                    methods: "POST"
                })
                console.log("getSwipers",res);
            }
        },
        onl oad() {
            this.getSwipers();
        }
    }

 

标签：uniapp,console,log,二次,res,App,myRequest,封装,const
来源： https://www.cnblogs.com/caicaiz/p/13712251.html