uniapp 简单封装请求带上 token 请求头
uniapp 简单封装请求带上 token 请求头
·
1. 新增: util/config.js 配置 baseUrl
export default {
baseUrl: "https://xxxx.com"
}
2. 新增: util/request.js 封装请求
import config from "./config.js"
export const request = (options) => {
return new Promise((resolve, reject) => {
let token = uni.getStorageSync('authorization')
// 在登录的时候需要储存 token uni.setStorageSync("authorization","这里是登录获取的token值")
uni.request({
url: config.baseUrl + options.url,
data: options.data || {},
method: options.method || 'POST',
header: options.header || {
// 根据实际接口设计 key 取 token 或者 authorization
authorization: token,
},
success: (res) => {
console.log(res.data); // 控制台显示数据信息
resolve(res.data)
},
fail: (err) => {
// 页面中弹框显示失败
uni.showToast({
title: '请求接口失败'
})
// 返回错误消息
reject(err)
},
catch: (e) => {
console.log(e);
}
})
})
}
// 将对象导出外部引入使用
export default {
request
}
3.修改: main.js 挂载请求
新增如下内容
import Vue from 'vue'
import request from './util/request.js'
4. 使用测试
this.$request.request({
url: '/ping',
method: 'GET',
}).then(res => {
console.log("------res------",res)
})
打印结果
------res------ [object] {“code”:200,“data”:“PONG”,“err”:{“code”:0,“msg”:""},“msg”:“OK”} at pages/user/bindphone1/bindphone1.vue:27
todo : 前端判断 token 过期自动跳转登录界面
更多推荐
已为社区贡献10条内容
所有评论(0)