uni-app项目中uni.request封装和使用

uni-app项目中uni.request封装和使用

在开发的时候，经常会用到前端请求后端接口，每次的请求都会出现地址不一样，参数不一样，方式不一样等等情况。那么我们这时候就有必要来对请求进行一次封装

1. 创建untils文件夹，并在文件夹下创建一个js文件，如下图所示:

2. 封装请求，代码如下

const BASE_URL = "http://127.0.0.1:8080/"; //开发时使用本地接口，在上线时只需要修改此处接口为线上地址即可
/**
 * @description 封装uni.request请求
 * @param url {String} 请求方法名
 * @param data {Object}  请求参数，可为空
 * @param method {String} 请求类型POST|GET
 * @param dataType {String} 请求数据类型
 * @param header {Object} 请求信息头
 */
const request = (url, data = {}, method = "POST", dataType = "json", header = {}) => {
	return new Promise((resolve, reject) => {
		uni.request({
			url: BASE_URL + url,
			method: methods,
			data: data,
			dataType: dataType,
			header: header
		}).then((response) => {
			setTimeout(function() {
				uni.hideLoading();
			}, 200);
			let [error, res] = response;
			resolve(res.data);
		}).catch(error => {
			let [err, res] = error;
			reject(err)
		})
	});
}
export default request

3.引用，将下面两句写入main.js中，这样在后面的页面中就可以直接调用了

import request from './utils/api.js';
Vue.prototype.$request=request;

整体的main.js如下

// #ifndef VUE3
import Vue from 'vue'
import App from './App'
import request from './utils/api.js';
Vue.prototype.$request=request;

Vue.config.productionTip = false

App.mpType = 'app'

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

// #ifdef VUE3
import { createSSRApp } from 'vue'
import App from './App.vue'
export function createApp() {
  const app = createSSRApp(App)
  return {
    app
  }
}
// #endif

4.使用
url必填，其他参数可填

//异步
			login() {
				let params={};
				params.username="123";
				params.password="456";
				this.$request("login",params,"POST").then(res => {
					console.log(res);
				}, err => {
					console.error(err)
				});
			},
			//同步
			async login(){
				let params={};
				params.username="123";
				params.password="456";
				const res=this.$request("login",params,"POST");
				console.log(res);
			}