uniapp封装request请求

一.在项目列表中新建api文件夹，文件夹中新建index.js和request.js文件

 

 

 二.在request.js中用promise封装uniapp的API uni.request

const http = {
	baseUrl: 'http://127.0.0.1:8000',
	//发送请求方法
	request(config) {
		config = beforeRequest(config)
		config.url = this.baseUrl + config.url
		//创建一个promise对象
		return new Promise((resolve, reject) => {
			uni.request(config)
				.then(res => {
					let [error, resp] = res
					const response = beforeResponse(resp)
					resolve(response)
				})
				.catch(err => {
					errorHandle()
					reject(err)
				})
		})
	},

	get(url, params, auth) {
		// url: 接口地址
		// data: 查询参数
		// auth：请求是否需要携带token进行认证（true/false）
		return this.request({
			url: url,
			data: params,
			method: 'GET',
			auth: auth
		})
	},
	post(url, params, auth) {
		return this.request({
			url: url,
			data: params,
			method: 'POST',
			auth: auth
		})
	},
	delete(url, params, auth) {
		return this.request({
			url: url,
			data: params,
			method: 'DELETE',
			auth: auth
		})
	},
};
//请求拦截器
const beforeRequest = (config) => {
	//请求之前要做的操作
	return config
}
//响应拦截器
const beforeResponse = (response) => {
	//响应之后要做的操作
	return response
}
//异常处理器
const errorHandle = (err) => {
	//响应之后要做的操作
}

export default http

 三.在api/index.js中引入request.js的http

import http from '@/api/request.js'
export default {
	login(params) {
		return http.post('/api/users/login/', params)
	}
}

 四.在main.js中导入封装的请求对象

//导入封装的请求对象
import api from './api/index.js'

//将请求对象设置为全局属性
Vue.prototype.$api = api

五.在页面中调用接口

<script>
	export default {
		data() {
			return {
				href: 'https://uniapp.dcloud.io/component/README?id=uniui',
				loginData:{
					userName:'xxx',
					passWord:'xxx',
				}
			}
		},
		methods: {
			async login(){
				const res = await this.$api.login(this.loginData)
				console.log(res);
			}
		}
	}
</script>