uni.request请求的封装

uni.request请求的封装

(一)static文件夹下创建js文件夹,再创建request.js文件,用于封装请求,使用promise封装

let baseUrl = ''; //域名或选取所有接口不变的那一部分
export const request = (options = {}) => {
	//异步封装接口,使用Promise处理异步请求
	return new Promise((resolve, reject) => {
		// 发送请求
		uni.request({
			url: baseUrl + options.url || '', //接收请求的API
			method: options.method || 'GET', //接收请求的方式,如果不传默认为GET
			data: options.data || {}, //接收请求的data,不传默认为空
		}).then(data => {
			let [err, res] = data;
			resolve(res);
		}).catch(error => {
			reject(error);
		})
	})
}

(二)同样在js文件夹下创建getData.js文件,将前端所有的请求都写在一起

import { request } from './request.js'; //导入封装好的js文件

//每一个请求的接口都返回一个函数,便于直接调用

//请求登录的接口
export const login = (data)=>{
	return request({
		url:'', //后端对应的接口,如果前端配置了跨域,这里直接写http://xx:xx后面的内容
		method:'',//请求的方式,get,post等
		data:data //请求所带的参数
	})
}

//请求注册的接口
export const register = (data)=>{
    return axios.request({
        url:"", 
        method:'post', 
        data:data, 
    })
}
...

(三)页面调用,哪个页面想使用,就在哪个页面中引入getData.js文件

import { login } from '../../static/js/getData.js';

async xx(){
    await login();
}

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