Uniapp網路請求指南

一、Uniapp網路請求封裝

由於網路請求在開發中經常用到，Uniapp提供了uni.request()函數，可以輕鬆實現網路請求。但是，對於項目複雜度高、網路請求頻繁的項目來說，每次請求都使用uni.request()不僅不利於代碼維護，還會導致代碼重複率高，增加耦合度。所以，我們需要對Uniapp網路請求進行封裝。

針對不同的項目需求，我們可以根據業務場景設計網路請求封裝方案。例如，對於需要請求多個介面的項目，我們可以將所有的網路介面請求封裝在一個文件內，方便調用。封裝後的網路請求函數可以包含以下參數：

function requestApi(url, method, data, header, successCallback, errorCallback) {
    uni.request({
        url: url,
        method: method,
        data: data,
        header: header,
        success: successCallback,
        fail: errorCallback
    });
}

在使用時，僅需傳遞相應的參數即可：

// 調用封裝後的函數
requestApi(apiUrl, 'GET', requestData, {}, function(res) {
    // success callback
}, function(res) {
    // error callback
});

二、Uniapp網路請求一直提示網路不佳

由於Uniapp是基於H5、小程序、App三個平台開發的，可能會遇到與網路相關的問題。造成網路不佳的主要因素有三個：

真實網路不佳
調用頻率過高
網路請求過程中佔用了過多的資源

對於第一種情況，我們需要關注系統網路狀態。當系統網路不穩定時，Uniapp會自動提示網路不佳，並適當減緩請求速度。如果是由於第二、三種情況引起的，我們可以通過批量請求或設置延時等方式來解決。

三、Uniapp網路請求插件

Uniapp提供了一些可以優化網路請求的插件，例如crossH5、localStorageCache、sessionStorageCache等。這些插件可以對網路請求進行緩存，降低伺服器負擔和網路開銷，提高用戶體驗。

使用插件也非常簡單，在HbuilderX中打開項目，然後進入manifest.json文件進行添加即可。

{
  ...
  "mp-weixin": {
    "plugins": {
      "yourPluginName": {
        "version": "yourPluginVersion",
        "provider": "yourPluginProvider"
      }
    }
  },
  "plugins": {
    "yourPlugin": {
      "version": "yourPluginVersion",
      "provider": "yourPluginProvider",
      "nativeConfig": {}
    }
  }
}

四、Uniapp網路請求類型入參

Uniapp網路請求支持GET、POST、PUT、DELETE等請求方式，我們在設計介面時需要根據業務需求選擇適合的請求方式。例如，對於只需要獲取數據的場景，我們可以使用GET請求；對於需要新增或修改數據的場景，我們可以使用POST或PUT請求。

在uni.request()方法中，根據請求類型進行不同的處理。以GET請求為例：

uni.request({
    url: 'apiUrl',
    data: {
        name: 'uniapp'
    },
    success: function(res) {},
    fail: function(res) {},
    complete: function() {}
})

五、Uniapp網路請求寫在哪比較好

根據Uniapp的開發規範，網路請求應該寫在頁面或者組件的methods中。頁面或組件中的methods可以看做是頁面或組件的局部作用域，將網路請求寫在methods內可以隔離請求，不會對全局產生影響，有利於開發維護。

六、Uniapp網路請求超時怎麼解決

網路請求超時通常是由於伺服器返回時間過長或者網路較差等原因引起，我們可以設置請求超時時間來解決：

uni.request({
    url: 'apiUrl',
    data: {
        name: 'uniapp'
    },
    timeout: 5000, // 超時時間
    success: function(res) {},
    fail: function(res) {},
    complete: function() {}
})

七、Uniapp網路請求一般用什麼方法

Uniapp官方建議我們使用XMLHttpRequest或Promise方法進行網路請求。一般來說，使用Promise方法可以更好地處理非同步邏輯，給開發帶來更好的體驗。

使用Promise方法進行網路請求：

function requestApi(url) {
    return new Promise(function(resolve, reject) {
        uni.request({
            url: url,
            success: function(res) {
                resolve(res);
            },
            fail: function(error) {
                reject(error);
            }
        })
    });
}

// 調用網路請求函數
requestApi('apiUrl').then(function(res) {
    console.log(res);
}).catch(function(error) {
    console.log(error);
})

八、Uniapp網路請求獲取數據

Uniapp網路請求成功後，我們需要將數據展現在頁面上。通過uni.request()方法返回的res參數獲取後台返回的數據，並進行數據處理。對於多層嵌套結構的數據，我們可以使用lodash插件進行處理。

import _ from "lodash"

// 處理後台返回的數據
function formatData(data) {
    var result = [];
    _.forEach(data, function(item) {
        result.push({
            id: item.id,
            name: item.name
        });
    })
    return result;
}

// 網路請求
uni.request({
    url: 'apiUrl',
    data: {
        name: 'uniapp'
    },
    success: function(res) {
        // 處理數據
        var data = formatData(res.data);
        // 其他操作
    },
    fail: function(res) {},
    complete: function() {}
})

九、Uniapp網路請求Promise

Uniapp還提供了uni.request-promise插件，在使用Promise方式進行網路請求時，可以優化代碼的可讀性。

// 引入插件
import request from "../plugins/request"

// 網路請求
request('/apiUrl', 'POST', {
    name: 'uniapp'
})
.then(function(res) {
    console.log(res);
})
.catch(function(error) {
    console.log(error);
})

十、Uniapp網路請求okhttp

在Uniapp的H5平台開發時，可以使用okhttp進行網路請求。

import axios from 'axios';
import { OkHttpInterceptorRegistry } from './okhttp.interceptor';

if (process.env.NODE_ENV === 'production') {
    axios.defaults.baseURL = window.location.protocol + "//" + window.location.host;
} else {
    axios.defaults.baseURL = 'http://localhost:8080';
}

axios.interceptors.request.use(config => {
    return new Promise((resolve, reject) => {
        const registry = OkHttpInterceptorRegistry.getInstance();
        registry.processRequest(config, (newConfig) => {
            resolve(newConfig);
        });
    });
});

axios.interceptors.response.use(response => {
    const registry = OkHttpInterceptorRegistry.getInstance();
    return registry.processResponse(response);
});

export default axios;

總結

本文詳細介紹了Uniapp網路請求的相關內容，從網路請求封裝、網路不佳處理、網路請求插件、類型入參、寫在哪等多個方面進行了闡述。作為一名合格的Uniapp開發者，我們必須熟練掌握網路請求的相關知識，在開發中靈活運用，提高開發效率。

原創文章，作者：NRJT，如若轉載，請註明出處：https://www.506064.com/zh-tw/n/142885.html