uni-app 封裝uni.request()接口

這裏通過Promise處理異步操作。

封裝uni.request()接口的 util/api.js文件：

// 二次封裝請求接口
const BASE_URL = 'http://localhost:8082'

export const myRequest = (options) => {
	return new Promise((resolve, reject) => {
		uni.request({
			url: BASE_URL + options.url,
			method: options.method || 'GET',
			data: options.data || {},
			success: (res) => {
				if(res.data.status !== 0){
					return uni.showToast()({
						title: '獲取數據失敗'
					})
				}
				resolve(res)
			},
			fail: (err) => {
				uni.showToast()({
					title: '請求接口失敗'
				})
				reject(err)
			}
		})
	})
}

 

然後在main.js文件內進行導入和全局掛載：

import { myRequest } from './util/api.js'

Vue.prototype.$myRequest = myRequest

使用：

async getData(){
	const res = await this.$myRequest({
		url: '/api/test'
	})
	conso le.log(res.data)
}

 

這裏是通過這個$myRequest進行訪問接口，並獲取數據。

 

options

正常vue頁面中，在onLoad()獲取，uni-app文檔中有

onLoad: function (option) { //option爲object類型，會序列化上個頁面傳遞的參數
    console.log(option.id); //打印出上個頁面傳遞的參數。
    console.log(option.name); //打印出上個頁面傳遞的參數。
}