uni.request() リクエスト、インターフェイス アドレスのカプセル化グローバル登録

個人的な研究メモ:

 リクエストを送信する際、インターフェースのリクエスト uni.request() が煩雑なので、リクエストを送信するたびにインターフェースのアドレスを繰り返し書きたくないのです。

1. すべてのリクエスト インターフェイス アドレスをカプセル化する api.js を作成します。

//baseurl
const baseurl = 'http://localhost:3000/api/'

//方法一
// class apiUrl{
// 	static urls(){
// 		let getAllCategory=`${baseurl}getAllCategory`
// 		return {
// 			getAllCategory,
// 		}
// 	}
// }

//方法二
let apiUrl = function() {
	// 请求菜品分类
	let getAllCategory = `${baseurl}getAllCategory`
	return {
		getAllCategory,
	}
}

export {apiUrl}

2. request.js を作成して uni.request リクエストをカプセル化します 

// Get 请求
let getRequest = function(urls) {
	return new Promise((resolve, reject) => {
		uni.request({
			url: urls,
			method: "GET",
			success: (res) => {
				resolve(res.data)
			},
		})
	})
}
//发送Post请求

export { getRequest }

3. 導入する必要があるコンポーネントに部分的に導入することも、main.js ファイルに全体的に導入することもできます 

(1) main.jsで導入

// 全局url地址
import {apiUrl} from './api/api.js'
Vue.prototype.ApiUrl = apiUrl

//全局get请求
import {getRequest} from './api/request.js'
Vue.prototype.GetRequest=getRequest

  使用：

        // 请求全部菜品分类
		async getCatagory(){
			// 接口地址
			let url=this.ApiUrl().getAllCategory
			console.log(url);
			// 发送请求
			let res=await this.GetRequest(url)
			console.log(res);
		}

   結果：

(2) 地域の必要に応じて導入

    インポートして使用するには:

import {getRequest} from '../../api/request.js'
import {apiUrl} from '../../api/api.js'
export default{
	data(){
		return{
		}
	},
	methods:{
		// 请求全部菜品分类
		async getCatagory(){
			// 接口地址
			let url=apiUrl().getAllCategory
			console.log(url);
			// 发送请求
			let res=await getRequest(url)
			console.log(res);
		}
	},
	onLoad() {
		// 请求全部菜品分类
		this.getCatagory()
		// 请求全部菜品信息
	}
}

    結果：