uniapp封装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,
			//可以传入请求方式，不传的话默认就是GET
			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里面引入上面的api.js

import Vue from 'vue'
import App from './App'
//全局引入myRequest
import {myRequest} from './util/api.js'

Vue.prototype.$myRequest = myRequest

Vue.config.productionTip = false

App.mpType = 'app'

const app = new Vue({
    ...App
})
app.$mount()

在methods方法里使用myRequest

<script>
	export default {
		data() {
			return {
				swipers:[]
			}
		},
		onLoad() {
			//打开页面时加载一次
			this.getSwipers()
		},
		methods: {
			//使用方法
			async getSwipers(){
				const res = await this.$myRequest({
					url:'/api/getlunbo'
				})
				this.swipers = res.data.message
			}
		}
	}
</script>