uniapp封装request头部带token

文章描述:

uniapp封装request方法中如何在header里面加入参数

一、根目录新建utils文件夹,在文件夹里面新建config.js、http.js文件

config.js

let baseurl = null;
if(process.env.NODE_ENV=='development'){
	//本地服务器
	baseurl = "http://localhost:10003"
}else{
	baseurl = "https://www.miyil.com/api"
}
export default baseurl

http.js

import baseurl from "./config.js";
const http = (option)=>{
	
	// console.log(option)
	/*
	option ={
		url:"XXX",
		method:"XXX",
		data:{XXX},
		header:{XXX}
	}
	*/
	return new Promise((resolve,reject)=>{
		uni.request({
			url:baseurl+option.url,
			method:option.method || 'get',
			data:option.data||{},
			header:option.header || {"content-type":"application/json"},
			success:resolve,
			fail:reject
		})
	})
}
export default http

二、在根目录main.js文件载入

/* http */
import http from "./utils/http.js"
Vue.prototype.$http = http

三、页面中使用接口

async getItems(){
	let option = {
		url: "/index.php",
		method:"POST",
		header:{'X-Access-Token':'12345678'},
		data:{id:'123'}
	}
	let res = await this.$http(option)
	console.log(res)
	if(res.data.meta.status !== 200) return uni.$showMsg();
},

根目录main.js封装弹出层方法

// 封装弹框的方法
uni.$showMsg = function(title='数据请求失败', duration = 1500){
	uni.showToast({
		title,
		duration,
		icon:'none'
	})
}

 

发布时间:2022/06/09

发表评论