uni-app调取接口的3种方式以及封装uni.request()详解

uni.request({
	url:'/api/getIndexCarousel.jsp',
	method:'get',
	success:res=>{
		console.log(res.data);
		this.carouselData = res.data
	}
})

uni.request({
	url:'/api/getIndexCarousel.jsp',
	method:'get',
}).then((result)=>{
	let [error,res] = result;
	//result将返回一个数组[error,{NativeData}]
	//NativeData：调取接口后返回的原生数据
	if(res.statusCode === 200){
		this.carouselData = res.data
	}
	if(res.statusCode === 404){
		console.log('请求的接口没有找到');
	}
})
 

onLoad() {
	this.request();
},
methods: {
	async request(){
		let result = await uni.request({
			url:'/api/getIndexCarousel.jsp'
		})
		console.log(result)
		let [err,res] = result;
		if(res.statusCode === 200){
			this.carouselData = res.data;
		}
	}
}

export default {
	request(options){
		uni.request({
			...options,
			success:res=>{
				console.log(res)
			}
		})
	},
	get(url,data={},options={}){
		options.url=url,
		options.data=data,
		options.method='get',
		this.request(options)
	},
	post(url,data={},options={}){
		options.url=url,
		options.data=data,
		options.method='post',
		this.request(options)
	}
}

export default{
	//封装uni.request()：
	request(options){
		return new Promise((resolve,reject)=>{
			//书写异步操作的代码
			uni.request({
				...options,
				success:res=>{
					if(options.native){
						resolve(res)	//调取接口后返回的原生数据	
					}
					if(res.statusCode === 200){
						resolve(res.data)	//异步操作执行成功
					}else{
						console.log('请求的接口没有找到');
						reject(res) 	//异步操作执行失败
					}
				}
			})
		})
	},
	get(url,data={},options={}){
		options.url=url;
		options.data=data;
		options.method='get';
		return this.request(options)
	},
	post(url,data={},options={}){
		options.url=url;
		options.data=data;
		options.method='post';
		return this.request(options)
	}
 
}

import request from '@/common/request.js';
Vue.prototype.$Z = request;

//封装uni.request()：
this.$Z.get('/api/getIndexCarousel.jsp',{},{
	native:false
}).then(res=>{
	//异步操作成功
	console.log(res)
}).catch(res=>{
	//异步操作失败
	console.log(res)
}).finally(res=>{
	//异步操作完成
});

uni.request({
    url: 'https://www.example.com/request', //仅为示例，并非真实接口地址。
    data: {
        name: 'name',
        age: 18
    },
    header: {
        'custom-header': 'hello' //自定义请求头信息
    },
    success: function (res) {
        console.log(res.data);
    }
});

const config = {
base_url: '这里可以是生产环境或者测试环境'
}
export { config }

import {
	config
} from '../config.js'
 
export const apiResquest = (prams) => { //prams 为我们需要调用的接口API的参数 下面会贴具体代码
 
	// 判断请求类型
	let headerData = {
		'content-type': 'application/json'
	}
 
	let dataObj = null
        //因为我们的GET和POST请求结构不同这里我们做处理，大家根据自己后台接口所需结构灵活做调整吧
	if (prams.method === "GET") {
		headerData = {
			'content-type': 'application/json',
			'token': uni.getStorageSync('token')
		}
	} else {
		dataObj = {
			'data': prams.query,
			'token': uni.getStorageSync('token')
		}
	}
	return new Promise((resolve, reject) => {
		let url = config.base_url + prams.url; //请求的网络地址和局地的api地址组合
		uni.showLoading({
			title: '加载中',
			mask: true
		})
		return uni.request({
			url: url,
			data: dataObj,
			method: prams.method,
			header: headerData,
			success: (res) => {
				uni.hideLoading()
                                //这里是成功的返回码，大家根据自己的实际情况调整
				if (res.data.code !== '00000') {
					uni.showToast({
						title: '获取数据失败:' + res.data.msg,
						duration: 1000,
						icon: "none"
					})
					return;
				}
				resolve(res.data);
				console.log(res.data)
			},
			fail: (err) => {
				reject(err);
				console.log(err)
				uni.hideLoading()
			},
			complete: () => {
				console.log('请求完成')
				uni.hideLoading()
			}
		});
	})
}

import { apiResquest } from '../utils/http.js'
 
//POST 请求案例
 
export const login = (query) => {
	return apiResquest({
		url: '这里是API的地址',
		method: 'POST',
		query: {...query}
	})
}
 
//GET 请求案例可以传递参数也可以不传递
export const validateCode  = (query) => {
	let str = query
	return apiResquest({
		url: `您的API地址 ?${str}`,
		method: 'GET'
	})
}

import { login } from '../../models/index.js'
//页面中的 methods 里面就可以直接调用了
Login(){
        //这里可以设置需要传递的参数
	let uid = uni.getStorageSync('userId')
	login(uid).then((res) => {
		console.log(res)
	}).catch(err => {
		console.log(err)
	})
}