建立一個uniapp請求，并且封裝request

uni-app官網：​​https://uniapp.dcloud.net.cn/​​

1：建立一個測試項目

2：模拟一個簡單的請求

圖檔.png

index.vue

<template>
    <view class="page">
        <view class="uni-list">
            <view class="uni-list-cell" hover-class="uni-list-cell-hover" v-for="item in itemList">
                <view class="uni-list-cell-navigate uni-navigate-right uni-media-list ">
                    <view class="uni-media-list-logo">
                        <image v-if="showImg" :src="item.thumbnail_pic_s"></image>
                    </view>
                    <view class="uni-media-list-body">
                        <view class="uni-media-list-text-top">{{item.author_name}}</view>
                        <view class="uni-media-list-text-bottom uni-ellipsis">{{item.title}}</view>
                    </view>
                </view>
            </view>
        </view>
    </view>
</template>
<script>
    export default {
        data() {
            return {
                showImg: false,
                itemList: []
            }
        },
        onLoad() {
            this.getList();
            this.showImg = true;

        },
        methods: {
            getList() {
                uni.request({
                    url: '../../static/1.json',
                    success: (res) => {
                        console.log(res.data);
                        this.itemList = res.data.result.data;
                    }
                });
            }
        }
    }
</script>
<style>
    .title {
        padding: 20upx;
    }
    .uni-navigate-right.uni-media-list {
        height: 80px;
    }
</style>      

json模拟的資料

{
    "reason": "成功的傳回",
    "result": {
        "stat": "1",
        "data": [{
            "author_name": "1"
        }, {
            "author_name": "2"
        }, {
            "author_name": "3"
        }, {
            "author_name": "4"
        }]
    },
    "error_code": 0
}      

3:請求成功

現在需要開始進行封裝

對以上進行一些修改

步驟如下：

1、項目下建立common檔案夾，再建立request.js檔案

2、打開request.js檔案，開始寫封裝的代碼

思路很簡單

定義域名：baseUrl；

定義方法：api；

通過promise異步請求，最後導出方法。

request.js參考代碼如下

// request.js
const baseUrl = 'http://192.xxx.xx.103:8091/chemApp'  
// const baseUrl = 'http://localhost:8082/chemApp'  
  //const baseUrl = '/chemApp'  
 //const baseUrl = '' 
const request = (options = {}) => {
    return new Promise((resolve, reject) => {
        uni.request({
            url: baseUrl + options.url || '',
            method:options.type || 'GET' ,
            data: options.data || {},
            header: options.header || {},
        }).then((response) => {
            setTimeout(function() {
                uni.hideLoading();
            }, 200);
            let [error, res] = response;        
            resolve(res.data);
        }).catch(error => {
            let [err, res] = error;
            reject(err)
        })
    });
}
const get=(url,data,options={})=>{
    options.type='get';
    options.data = data;
    options.url = url;
    return request(options)
}
const post = (url, data, options = {}) => {
    options.type = 'post';
    options.data = data;
    options.url = url;
    return request(options)
}
const put = (url, data, options = {}) => {
    options.type = 'put';
    options.data = data;
    options.url = url;
    return request(options)
}
export default {
    request,
    get,
    post,
    put,
    baseUrl
}      

3、在main.js全局注冊

import Vue from 'vue'
import App from './App'
import request from 'common/request.js'
Vue.prototype.$request = request 
Vue.config.productionTip = false
App.mpType = 'app'
const app = new Vue({
    ...App
})
app.$mount()      

4、頁面調用,發起一個get請求

this.$request.get('/caller/getCallers.action', {
                    "name": "", // 目前頁碼
                    "pageBean.page": 1, // 目前頁碼
                    "pageBean.rows": 2, // 每頁顯示數量               
                    "pageBean.pagination": true
                }).then(res => {
                    console.log(res)
                })      

頁面調用的index.vue

<template>
    <view>
        <uni-list v-for="(item,index) in productList" :key="index">
            <uni-list-item :title="item.author_name" :note="item.title"></uni-list-item>
        </uni-list>
 
    </view>
</template>
<script>
    import uniList from "@/components/uni-list/uni-list.vue"
    import uniListItem from "@/components/uni-list-item/uni-list-item.vue"
    export default {
        components: {
            uniList,
            uniListItem
        },
        data() {
            return {
                productList: [],
            };
        },
        onLoad() {
            this.getList();
        },
        methods: {
            getList() {
                this.$request.get('/caller/getCallers.action', {
                    // 傳參參數名：參數值,如果沒有，就不需要傳
                    // "username": "john",
                    // "key": this.searchValue
                }).then(res => {
                    // 列印調用成功回調
                    console.log(res)
                    this.productList = res;
                })
            },
        }
    }
</script>
<style>
</style>      

調用成功