Vue集成axios配置文件request.js
Vue集成axios
·
首先,Vue安装axios命令:npm i axios -S
request.js配置文件封装如下:
// 接口请求封装:Vue基于axios封装request接口请求——request.js文件
// Axios是一个基于promise的Ajax网络请求库,作用于node.js和浏览器中,在服务端它使用原生node.js http模块, 而在客户端 (浏览器端) 则使用XMLHttpRequests(XHR)
import axios from 'axios'
import router from '../router'
// 1. 创建axios实例request
const request = axios.create({
baseURL: "/api", // 注意:这里是全局统一加上了'/api'前缀,即所有接口都会加上'/api'前缀,页面里面写接口的时候就不要加'/api'了,否则会出现2个'/api',类似'/api/api/user'这样的报错,切记!!
timeout: 5000 // 请求超时时间
})
// 2. request添加请求拦截器:可以自请求发送前对请求做一些处理,比如统一加token,对请求参数统一加密
request.interceptors.request.use(
config => {
config.headers['Content-Type'] = 'application/json;charset=utf-8';
config.headers["token"] = sessionStorage.getItem("token")
// config.headers['token'] = user.token; // 设置请求头
// 取出sessionStorage里面缓存的用户信息,是json字符串
/*let userJson = sessionStorage.getItem("user")
if (!userJson) {
router.push("/login") // 若登录用户信息为空则跳转至登录页面
}*/
return config
},
error => {
return Promise.reject(error)
}
);
// 3. response添加响应拦截器:可以在接口响应后统一处理结果
request.interceptors.response.use(
response => {
let res = response.data; // 使用axios动态获取response里的data数据。存储token到localStorage
if (res.code == 401) {
router.push("/")
localStorage.clear()
sessionStorage.clear()
}
// 如果是返回的文件(blob)
if (response.config.responseType === 'blob') {
return response
}
// 兼容服务端返回的字符串数据
if (typeof res === 'string') {
res = res ? JSON.parse(res) : res
}
return res;
},
error => {
console.log('err' + error) // for debug
return Promise.reject(error)
}
)
export default request
更多推荐
已为社区贡献1条内容
所有评论(0)