uniapp封装AJAX请求

第一步需要在全局目录中创建config.js,里面需要设置BAST_URL,并且暴露出去

export const BAST_URL='http://129.211.169.131:3333'

第二步创建utils文件夹,里面创建request.js,里面引入BAST_URL,然后暴露出一个方法,这个方法的形参就是从API层定义的对象,然后在这个方法里面new一个promise对象,这个promise对象里面使用request发送请求,如:

import {BAST_URL} from"@/config.js"

export function login(httpdata){
	return new Promise((resolve,reject)=>{
		uni.request({
			url:BAST_URL+httpdata.url,
			method:httpdata.method,
			data:httpdata.data,
			success:(res)=>{
				console.log(res);
			},
			fail(err) {
				console.log(err);
			}
		})
	})	
}

第三步,创建API层,引入从utils里面暴露出来的方法,在这个api层里面写各个页面发送ajax的方法。这个方法的形参就是数据,里面配置url地址,和传参方法(post,get),还有参数列表(也就是形参)。

import {login} from "@/utils/request.js"

export function logins(data){
	return login({
		url:'/reg',
		method:"post",
		data
	})
}

第四步,在需要发送AJAX的页面引入api层的文件

	import {logins} from "@/api/index.js"

然后在onload里面发起AJAX。有两种方式,

第一种async和await

       async onLoad() {
		let res=await logins({acc:"18523954556",pwd:"12456"}) 
		},

第二种,使用promise的.then.catch

onLoad() {
			logins({acc:"18523954666",pwd:"123456"})
            .then(res=>{console.log(res);})
            .catch(err=>{console.log(err)})
		},

你可能感兴趣的:(uni-app,javascript,前端)