我們知道一個專案中對於前期架構的搭建工作對於後期的製作有多麼重要，所以不管做什麼專案我們拿到需求後一定要認真的分析一下，要和產品以及後臺溝通好，其中尤為重要的一個環節莫過於封裝介面請求了。因為前期封裝好了，後面我們真的可以實現貼上複製了。所以今天小月部落格給大家分享一個在uni-app中如何封裝一個request請求。

第一步、根目錄下新建 config.js 檔案

const config = {
base_url: '這裡可以是生產環境或者測試環境'
}
export { config }

這裡主要配置介面的基本路徑

第二步、根目錄下新建 utils/http.js 檔案

import {
	config
} from '../config.js'

export const apiResquest = (prams) => { //prams 為我們需要呼叫的介面API的引數 下面會貼具體程式碼

	// 判斷請求型別
	let headerData = {
		'content-type': 'application/json'
	}

	let dataObj = null
        //因為我們的GET和POST請求結構不同這裡我們做處理，大家根據自己後臺介面所需結構靈活做調整吧
	if (prams.method === "GET") {
		headerData = {
			'content-type': 'application/json',
			'token': uni.getStorageSync('token')
		}
	} else {
		dataObj = {
			'data': prams.query,
			'token': uni.getStorageSync('token')
		}
	}
	return new Promise((resolve, reject) => {
		let url = config.base_url + prams.url; //請求的網路地址和局地的api地址組合
		uni.showLoading({
			title: '載入中',
			mask: true
		})
		return uni.request({
			url: url,
			data: dataObj,
			method: prams.method,
			header: headerData,
			success: (res) => {
				uni.hideLoading()
                                //這裡是成功的返回碼，大家根據自己的實際情況調整
				if (res.data.code !== '00000') {
					uni.showToast({
						title: '獲取資料失敗:' + res.data.msg,
						duration: 1000,
						icon: "none"
					})
					return;
				}
				resolve(res.data);
				console.log(res.data)
			},
			fail: (err) => {
				reject(err);
				console.log(err)
				uni.hideLoading()
			},
			complete: () => {
				console.log('請求完成')
				uni.hideLoading()
			}
		});
	})
}

第三步、 建立model 層 根目錄下新建 models/index.js 檔案

——-⚠️注意： 這裡可以根據自己的專案功能需求分解models 層——-

import { apiResquest } from '../utils/http.js'

//POST 請求案例

export const login = (query) => {
	return apiResquest({
		url: '這裡是API的地址',
		method: 'POST',
		query: {...query}
	})
}

//GET 請求案例可以傳遞引數也可以不傳遞
export const validateCode  = (query) => {
	let str = query
	return apiResquest({
		url: `您的API地址 ?${str}`,
		method: 'GET'
	})
}

第四步、頁面中呼叫

import { login } from '../../models/index.js'
//頁面中的 methods 裡面就可以直接呼叫了
Login(){
        //這裡可以設定需要傳遞的引數
	let uid = uni.getStorageSync('userId')
	login(uid).then((res) => {
		console.log(res)
	}).catch(err => {
		console.log(err)
	})
}

以上程式碼就是完整的介面封裝了，真的超級實用，其實網上有很多關於uni-app介面封裝的案例，但是個人感覺親測了好幾種，這種是最好用的。分享在這裡希望和大家一起交流。

最近會持續分享uni-app相關的文章。更多uni-app學習資源如下

uni-app快速入門 從零開始實現新聞資訊類跨端應用(含原始碼)完整無祕

純正商業級應用-微信小程式開發實戰-完整無祕

百度雲盤直接下載，裡面講的更多的是一種學習方法，非常值得學習。