Promise封装前端接口

1. 什么是Promise
   Promise 对象代表了未来将要发生的事件，用来传递异步操作的消息。
2. 如何利用Promise进行类似同步操作

test(index){
	return new Promise((resolve, reject) => {
		//逻辑处理
		if ( index*10>100 ) {
			//执行通过返回参数
			reject(index*10)
		}else{
			//执行错误返回参数
			resolve("数据小于10")
		}
		 
	})
},
//调用
test_end(){
	this.test(11).then(res => {
		if(res){
		//正常通过处理
		console.log(res)
		}
	}).catch(err => {
		//异常处理
		console.log(err)
	}).finally(() => {
		//无论正常还是异常，在处理完之后都会执行该方法，最常用于间隔锁，防止多次点击，重复请求
		console.log("执行结束")
	})
}

小例子：uniapp封装前端请求接口
封装：创建request.js

function request(options) {
	const baseUrl = 'http://127.0.0.1:8084'+options.url;
	const data = ({
		app_key: "",
		data: options.data,
		format: 'json',
		method: "",
		timestamp: "",
		token: "",
		v: '1.0',
		sign: ""
	})
	return new Promise((resolve, reject) => {
		//这里也可以改成axios的ajax的都可以
		uni.request({
			url: baseUrl,
			method: 'POST',
			header:{
			  'Content-Type': 'application/x-www-form-urlencoded;charset=UTF-8'
			},
			timeout: 30000,
			data: data,
			success(res) {
				resolve(res)
			},
			fail(err) {
				reject(err)
			}
		})
	})
}
export default request

调用request
创建test/index.js

import request from "../request.js"
//查询
function query(index) {
	return request({
		data: index,
		url:"/test_api/query"
	})
}

使用接口

import {query} from "@/api/test/index.js"
export default {
	data(){
		return{
			lock:false
		}
	},
	methods: {
		test() {
			if(!this.lock){
				return	
			}
			this.lock = true
			query(JSON.stringify({
			//博主公司要求必须转化成string类型、也方便后续加密
			id:'1234',
			name:'laowang',
			ago:'2'
			})).then(res =>{
				//逻辑处理
				console.log(res.data)
			}).catch(err =>{
				console.log(err)
			}).finally(() =>{
				this.lock = false
			})
		}
	}
}

最后：封装接口稍有改动，比如加密签名什么的都删掉了，可以将加密等添加上，这里我就不添加了。