記錄轉載：uni-app 請求 uni.request封裝使用

這裡給大家分享我在網上總結出來的一些知識，希望對大家有所幫助

對uni.request的一些共同參數進行簡單的封裝，減少重覆性數據請求代碼。方便全局調用。

先在目錄下創建 utils 和 common 這2個文件夾

utils 是存放工具類的，common 用來放置常用方法的

之後在utils 中創建 requset.js 用來放置 uni.request 的請求方法，在對其進行簡單的封裝。

requset.js 代碼

import operate from '../common/operate.js'
// vuex 的使用  詳情參考官網 https://uniapp.dcloud.io/vue-vuex
import store from '../store/index.js'  

export default class Request {
    http(param) {
        // 請求參數
        var url = param.url,
            method = param.method,
            header = {},
            data = param.data || {},
            token = param.token || "",
            hideLoading = param.hideLoading || false;

        //拼接完整請求地址
        var requestUrl = operate.api + url;
       //拼接完整請求地址（根據環境切換）
       // var requestUrl = operate.api() + url;

        //請求方式:GET或POST(POST需配置
        // header: {'content-type' : "application/x-www-form-urlencoded"},)
        if (method) {
            method = method.toUpperCase(); //小寫改為大寫
            if (method == "POST") {
                header = {
                    'content-type': "application/x-www-form-urlencoded"
                };
            } else {
                header = {
                    'content-type': "application/json"
                };
            }
        }

        //載入圈
        if (!hideLoading) {
            uni.showLoading({
                title: '載入中...'
            });
        }

        // 返回promise
        return new Promise((resolve, reject) => {
            // 請求
            uni.request({
                url: requestUrl,
                data: data,
                method: method,
                header: header,
                success: (res) => {
                    // 判斷 請求api 格式是否正確
                    if (res.statusCode && res.statusCode != 200) {
                        uni.showToast({
                            title: "api錯誤" + res.errMsg,
                            icon: 'none'
                        });
                        return;
                    }
                    // 將結果拋出
                    resolve(res.data)
                },
                //請求失敗
                fail: (e) => {
                    uni.showToast({
                        title: "" + e.data.msg,
                        icon: 'none'
                    });
                    resolve(e.data);
                },
                //請求完成
                complete() {
                    //隱藏載入
                    if (!hideLoading) {
                        uni.hideLoading();
                    }
                    resolve();
                    return;
                }
            })
        })
    }
}

在common 中分別創建 operate.js 和 api.js

operate.js 用來放置請求介面 api 地址

export default {
    //介面
    api: "http://192.168.208.126:8080",
}

根據小程式環境 切換介面地址

export default {
	//介面
	api: function() {
	    let version = wx.getAccountInfoSync().miniProgram.envVersion;
	    switch (version) {
		case "develop": //開發預覽版
			return "https://www.baidu.com/"
			break;
		case 'trial': //體驗版
			return "https://www.baidu.com/"
			break;
		case 'release': //正式版
			return "https://www.baidu.com/"
			break;
		default: //未知,預設調用正式版
			return "http://www.baidu.com/"
			break;
	}
}

使用方法一（全局請求）

在跟目錄創建api文件夾：在創建api.js

api.js 是用來調用我們封裝好的 uni.request ,並且統一管理請求介面，在後續開發中只需要在頁面中調用 api.js中請求即可

import Request from '@/utils/requset.js'
let request = new Request().http

//全局定義請求頭
export default {
    // 請求樣式
    classifyLeft: function(data) {
        return request({
            url: "/category/list", //請求頭
            method: "GET", //請求方式
            data: data, //請求數據
        })
    },
}
/*
請求樣式：
    自定義名字: function(data) {
        return request({
            url: "/banner", //請求頭
            method: "GET", //請求方式 
            data: data,    //請求數據
            token: token, // 可傳  
            hideLoading: false, //載入樣式
        })
    },
*/

api.js的調用可以在main.js 中進行全局調用，也可以在需要的頁面中調用，可根據實際情況來決定是否全局 調用。下麵只介紹全局調用

在mian.js中導入api.js

1. 在main.js 中引入api.js
        import api from '@/common/api.js'
        Vue.prototype.$api = api
2. 在頁面中調用
        //不傳參數
        this.$api.sendRequest().then((res) => {
            console.log(res);
        })
        //傳參
        this.$api.sendRequest({參數}).then((res) => {
            console.log(res);
        })

使用方法二（頁面單獨引入）

user.js 是用來調用我們封裝好的 uni.request ,並且統一管理請求介面，在後續開發中只需要在頁面中調用 user.js中請求即可

import Request from '@/utils/requset.js'
import operate from '@/common/operate.js'
let request = new Request().http

// 按需引入的 請求頭
export const getUserInfo= function(data) {    
    return request({
	url: "order/user ",		
        method: "POST",
	data: data,
	token: operate.isToken()
    })
}

頁面中使用

//引入
import {
    getUserInfo
} from '@/api/user.js'

//放入生命周期
init() {
    //用戶信息
    getUserInfo().then((res) => {
	console.log(res);
    })
},

本文轉載於:https://juejin.cn/post/7023983465892675614

如果對您有所幫助，歡迎您點個關註，我會定時更新技術文檔，大家一起討論學習，一起進步。