uniapp 封装请求接口 (带token)

uniapp 封装请求接口 (带token)

1.在创建好的uniapp项目中新建文件夹util,再新建config.js文件配置baseUrl

export default {
	//接口请求域名配置
	baseUrl : 'https://xxxx.com'
}
 

2.新建request.js文件 ,封装请求

import config from "./config.js"

const headers = {}
const url = {}
url.request = async (url, params = {}, method, needDataSource = 0, needToken = false, needLoading = true) => {
	if (needLoading == true) {
		uni.showLoading({
			title: '加载中',
		})
	}
	
	if (needToken) {
	    //登录时存储token uni.setStorageSync('token',data.accessToken)
		const Authorization = uni.getStorageSync('token')
		//请求头拼接
		headers['Authorization'] = 'Bearer '+Authorization
	}else {
		delete headers['Authorization']; 
	}
	switch (needDataSource) {
		case 0:
			headers['x-datasource'] = 'shtraining'
			break;
		case 1:
			headers['x-datasource'] = 'shtraining-lab'
			break;
	}
	let full_url = config.baseUrl + url;
	return await uni.request({
		url: full_url,
		header: headers,
		data: params||{},
		method: method,
	}).then(res => {
		uni.hideLoading()
		if (!res) {
			return 0;
		}
		console.log(res.data);
		return res.data;

	}).catch(parmas => {
		uni.hideLoading()
		switch (parmas.code) {
			case 401:
				uni.clearStorageSync()
				break
			default:
				uni.showToast({
					title: parmas.message,
					icon: 'none'
				})
				return Promise.reject()
				break
		}
	})
}
//导出
export default url

3.在util中新建publicapi.js文件

// 获取用户信息
public_api.getUserInfo = params => url.request('/api/usercenter/userDetails',params,'GET',0,true)
// 获取展区
public_api.getLabel = params => url.request('/api/show/getLabel', params, 'POST',1)
// 获取展商
public_api.getContent = params => url.request('/api/getContentByChannelId',params,'GET',1)
...

4.在main.js中修改

import Vue from 'vue'
import  request from './util/request.js'
import api from "./util/publicapi.js"
Vue.prototype.$api = api

5.页面中使用

this.$api.getUserInfo({}).then(res=>{
					console.log(res,'用户信息')
					if(res.code ==0){
						let data = res.data
						this.userInfo = {
							id:data.id,
							uname: data.username,
							avatar:data.identificationPhotoDefault
						}
						uni.setStorageSync('userInfo',data)
						
					}
					
				})
  • 23
    点赞
  • 10
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
可以在 `uni-app` 中使用 `axios` 库进行接口请求,并且可以在请求头中添加 `token`。 首先需要安装 `axios` 库: ```bash npm install axios --save ``` 然后在需要使用的地方引入: ```javascript import axios from 'axios' ``` 下面是一个基本的 `axios` 请求封装: ```javascript const request = axios.create({ // 创建 axios 实例 baseURL: 'https://api.example.com', // 设置请求的 base url timeout: 5000, // 设置请求超时时间 }) // 请求拦截器 request.interceptors.request.use( config => { const token = uni.getStorageSync('token') // 从本地缓存中获取 token if (token) { // 如果 token 存在则在请求头中添加 token config.headers.Authorization = `Bearer ${token}` } return config }, error => { console.log(error) return Promise.reject(error) } ) // 响应拦截器 request.interceptors.response.use( response => { return response.data }, error => { console.log(error) return Promise.reject(error) } ) export default request ``` 在上面的代码中,我们创建了一个 `axios` 实例,并设置了请求的 `baseURL` 和超时时间。我们还添加了一个请求拦截器,在请求头中添加了 `token`。可以看到,我们使用了 `uni.getStorageSync('token')` 方法从本地缓存中获取了 `token`。在响应拦截器中,我们只返回了响应数据的 `data` 属性。 使用封装好的 `axios` 请求: ```javascript import request from '@/utils/request' request.get('/example').then(response => { console.log(response) }).catch(error => { console.log(error) }) ``` 这样我们就可以在 `uni-app` 中使用 `axios` 库进行接口请求,并且在请求头中添加 `token` 了。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值