uniapp 网络请求封装

uniapp 网络请求封装

一、简单版

1.http.js 封装

// 定义api请求域名
const baseUrl = 'https://xxx.xxx.com'; //测试域名
// const baseUrl = '';//正式域名

const request = (options = {
     
     }) => {
    
    
	// 在这里可以对请求头进行一些设置
	options.header = {
    
    
		"token": uni.getStorageSync("token"),
		"Content-Type": "application/x-www-form-urlencoded",
	}
	return new Promise((resolve, reject) => {
    
    
		uni.request({
    
    
			url: baseUrl + options.url || '',
			method: options.type || 'GET',
			data: options.data || {
    
    },
			header: options.header || {
    
    }
		}).then(data => {
    
    
			let [err, res] = data;
			resolve(res);
		}).catch(error => {
    
    
			let [err, res] = error;
			reject(err)
		})
	});
}
//get请求
const get = (url, data, options = {
     
     }) => {
    
    
	options.type = 'GET';
	options.data = data;
	options.url = url;
	return request(options)
}
//post请求
const post = (url, data, options = {
     
     }) => {
    
    
	options.type = 'POST';
	options.data = data;
	options.url = url;
	return request(options)
}
//将变量和方法进行导出
export default {
    
    
	baseUrl,
	request,
	get,
	post,
}

2.main.js中全局引入

import Vue from 'vue'
import http from './common/http.js'
Vue.prototype.$http = http

3.在页面中使用index.vue

export default {
    
    
	methods:{
    
    
		login(){
    
    
			let data = {
    
    
				name:'zhangsan',
				password:'111'
			}
			this.$http.post('/api/login',data).then(res=>{
    
    
				console.log('登录返回信息',res)
			})
		}
	}
}

二、二次封装版

1.request.js

// 定义api请求域名
const baseUrl = 'https://xxx.xxx.com'; //测试域名
// const baseUrl = '';//正式域名

const request=(url,method,data,header)=>{
    
    
	return new Promise((resolve,reject)=>{
    
    
		uni.request({
    
    
			url:baseUrl+url,
			method:method || "GET",
			data:data,
			header:header || {
    
    
				"token": uni.getStorageSync("token"),
				"Content-Type": "application/x-www-form-urlencoded",
			}
		}).then(data=>{
    
    
			let [err,res] = data;
			resolve(res)
		}).catch(error=>{
    
    
			let [err,res] = error;
			reject(err)
		})
	})
}

export default {
    
    
	request,
	baseUrl,
}

2.api.js 全部api接口列表，引入request.js

import api from '@/common/request.js'
export default {
    
    
	login:(data,header)=>{
    
    
		return api.request('/api/login',"POST",data,header)
	}
}

3.在main.js中全局引入

import Vue from 'vue'
import api from './common/api.js';
Vue.prototype.$api = api;

4.在index.vue中使用

export default {
    
    
	methods:{
    
    
		login(){
    
    
			let data = {
    
    
				name:'zhangsan',
				password:'111'
			}
			that.$api.login(data).then(res=>{
    
    
					console.log("登录信息",res);
				}).catch(err=>{
    
    
					console.log("登记信息--失败",err);
				})
		}
	}
}