官方文件

uni.request(OBJECT)

發起網路請求。

在各個小程式平臺執行時，網路相關的 API 在使用前需要配置域名白名單。

OBJECT 引數說明

method 有效值

必須大寫，有效值在不同平臺差異說明不同。

success 返回引數說明

data 資料說明

最終傳送給伺服器的資料是 String 型別，如果傳入的 data 不是 String 型別，會被轉換成 String。轉換規則如下：

• 對於GET方法，會將資料轉換為 query string。例如{ name: 'name', age: 18 }轉換後的結果是name=name&age=18。
• 對於POST方法且header['content-type']為application/json的資料，會進行 JSON 序列化。
• 對於POST方法且header['content-type']為application/x-www-form-urlencoded的資料，會將資料轉換為 query string。

示例

uni.request({
    url: 'https://www.example.com/request', //僅為示例，並非真實介面地址。
    data: {
        text: 'uni.request'
    },
    header: {
        'custom-header': 'hello' //自定義請求頭資訊
    },
    success: (res) => {
        console.log(res.data);
        this.text = 'request success';
    }
});

返回值

如果希望返回一個requestTask物件，需要至少傳入 success / fail / complete 引數中的一個。例如：

var requestTask = uni.request({
    url: 'https://www.example.com/request', //僅為示例，並非真實介面地址。
    complete: ()=> {}
});
requestTask.abort();

如果沒有傳入 success / fail / complete 引數，則會返回封裝後的 Promise 物件：Promise 封裝

通過requestTask，可中斷請求任務。

requestTask 物件的方法列表

示例

const requestTask = uni.request({
    url: 'https://www.example.com/request', //僅為示例，並非真實介面地址。
    data: {
        name: 'name',
        age: 18
    },
    success: function(res) {
        console.log(res.data);
    }
});

// 中斷請求任務
requestTask.abort();

Tips

• 請求的header中content-type預設為application/json。
• 避免在header中使用中文，或者使用 encodeURIComponent 進行編碼，否則在百度小程式報錯。（來自：快狗打車前端團隊）
• 網路請求的超時時間可以統一在manifest.json中配置networkTimeout。
• H5 端本地除錯需注意跨域問題，參考：除錯跨域問題解決方案
• 注意由於百度小程式iOS客戶端，請求失敗時會進入fail回撥，需要針對百度增加相應的處理以解決該問題。
• 注意非 H5 端不支援自動保持 cookie，伺服器應避免驗證 cookie。如果伺服器無法修改，也可以使用一些模擬手段，比如這樣的工具https://github.com/charleslo1/weapp-cookie可以請求時帶上 cookie 並將響應的 cookie 儲存在本地。
• H5端 cookie 受跨域限制（和平時開發網站時一樣），但 uni.request 目前未支援 withCredentials 配置，可以直接使用 xhr 物件或者其他類庫。
• 根據 W3C 規範，H5 端無法獲取 response header 中 Set-Cookie、Set-Cookie2 這2個欄位，對於跨域請求，允許獲取的 response header 欄位只限於“simple response header”和“Access-Control-Expose-Headers”（詳情）
• uni-app 外掛市場有flyio、axios等三方封裝的攔截器可用
• 低版本手機自身不支援 ipv6，如果伺服器僅允許 ipv6，會導致老手機無法正常執行或訪問速度非常慢
• localhost、127.0.0.1等伺服器地址，只能在電腦端執行，手機端連線時不能訪問。請使用標準IP並保證手機能連線電腦網路
• debug 模式，安卓端暫時無法獲取響應頭，url中含有非法字元（如未編碼為%20的空格）時會請求失敗
• iOS App第一次安裝啟動後，會彈出是否允許聯網的詢問框，在使用者點選同意前，呼叫聯網API會失敗。請注意判斷這種情況。比如官方提供的新聞模板示例（HBuilderX新建專案可選擇），會判斷如果無法聯網，則提供一個錯誤頁，提示使用者設定網路及下拉重新整理重試。
• 良好體驗的App，還會判斷當前是否處於飛航模式（參考）、是wifi還是3G（參考）
• 部分安卓裝置，真機執行或debug模式下的網路，低於release模式很多。
• 使用一些比較小眾的證書機構（如：CFCA OV OCA）簽發的 ssl 證書在安卓裝置請求會失敗，因為這些機構的根證書不在系統內建根證書庫，可以更換其他常見機構簽發的證書（如：Let's Encrypt），或者配置 sslVerify 為 false 關閉 ssl 證書驗證（不推薦）。
• 單次網路請求資料量建議控制在50K以下（僅指json資料，不含圖片），過多資料應分頁獲取，以提升應用體驗。

<template>
    <view>
        <view>
            <text selectable>唱跳Rap籃球{{name}}</text>
        </view>
        <view>
            <text selectable space="emsp">唱跳 Rap 籃球-{{name}}</text>
        </view>
        <view class="box" hover-class="box-active">
            <!-- hover-stop-propagation阻止冒泡 -->
            <view class="box1" :hover-start-time="2000" :hover-stay-time="2000" hover-class="box1-active" hover-stop-propagation></view>
        </view>
        <view>
            <text>{{btn}}</text>
            <button @click="set_btn()" size="default" type="primary" plain loading>按鈕</button>
        </view>
        <image src="http://img.gucci-outlets-online.com:8088/catch_down/20200427124446_683364.gif" mode="aspectFit"></image>
        <view v-for="(item,index) in arr" :key='item.id'>
            <view class="gogogo">
                {{index}}-{{item.title}}year{{item.year}}
                <!-- 事蹟{{item.content}} -->
            </view>
        </view>
    </view>
</template>

<script>
    export default {
        data() {
            return {
                name: "菜菜",
                btn: "",
                arr: [],
            }
        },
        methods: {
            set_btn() {
                this.btn = "愛了愛了",
                this.send_Get()
            },
            send_Get() {
                let _this = this
                uni.request({
                    method: 'GET',
                    url: 'https://api.jisuapi.com/todayhistory/query',
                    data: {
                        appkey: 'd1e87a8e45ba7749',
                        month: 2,
                        day: 18
                    },
                    success(res) {
                        console.log(res.data)
                        console.log(res.data.result)
                        _this.arr = res.data.result
                    },
                })
            }
        },
        onPullDownRefresh() {
            console.log("重新整理了")
        },
        onReachBottom() {
            console.log("觸底了")
        }
    }
</script>

<style>
    .box {
        width: 200px;
        height: 200px;
        background: #007AFF;
    }

    .box-active {
        background: red;
    }

    .box1 {
        width: 100px;
        height: 100px;
        background: #4CD964;
    }

    .box1-active {
        background: white;
    }

    .gogogo {
        margin: 30px auto;
        /* padding: 50px 30px; */
    }
</style>