uni-app项目中request请求封装和使用（promise）

uni-app项目中request请求封装和使用（promise）

开发时我们使用本地的请求地址，而在项目上线时会使用线上的地址，并且每个请求所含的参数和请求方式都不大相同，那么在开发时对请求进行封装就是必要的了

如图所示，先新建文件夹util，在util下新建js文件api.js

1. 请求接口地址

请求接口在开发时使用本地接口，而在线上时就是用线上的在线接口，如果不做封装，那么在上线之前就要对每一个请求地址进行修改，降低了工作效率。

const BASE_URL="http://localhost:8082"; //开发时使用本地接口，在上线时只需要修改此处接口为线上地址即可
1 请求函数封装

2. 请求函数封装 

const BASE_URL="http://localhost:8082"; //开发时使用本地接口，在上线时只需要修改此处接口为线上地址即可

export const myRequest=(options)=>{ //传入的options是一个json对象
	return new Promise((resolve,reject)=>{
		uni.request({
			url:BASE_URL+options.url,
			method:options.methods||"GET",
			data:options.data || {},
			dataType:options.dataType || "json",
			success: (res) => {
				if(res.data.status !== 0){
					return uni.showToast({
						title:"获取数据失败"
					})
				}
				resolve(res)
			},
			fail: (err) => {
				uni.showToast({
					title:"接口请求失败"
				})
				reject(err)
			}
		})
	})
}

因为要在不同的页面调用请求函数，所以函数必须暴露出来

3. 在页面中引入

因为会在不同的页面使用，所以在使用时在全局引入时最好的，只需要引入一次，不需要在每个页面都引入了，所以在main.js中引入
main.js

import Vue from 'vue'
import App from './App'

import { myRequest } from './util/api.js'
Vue.prototype.$myRequest = myRequest

Vue.config.productionTip = false

App.mpType = 'app'

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

4. 使用

因为引入接口函数api.js的时候时全局引入，所以在页面内不用引入了，直接使用就可以了
index.vue

 methods: {
	async getSwiper(){
		const res = await this.$myRequest({
			url:'/api/getlunbo'
		})
		//这里只需要传入不同的接口地址就可以
		console.log(res);
	},
 }