前端必备知识-----添加token到请求拦截器中，响应拦截器中设置公共错误提示

在实际发送请求获取数据时，往往需要往请求头中加入特定的token值，以此来获取个性化数据

下面是代码演示

import axios from 'axios';
import { ElMessage } from 'element-plus'
import 'element-plus/theme-chalk/el-message.css'
import { useUserStore } from '@/stores/user';

// 创建axios实例
const http = axios.create({
  baseURL: '这里填配置请求的基地址',
  timeout: 5000
})

// 添加请求拦截器
http.interceptors.request.use(function (config) {
  // 在发送请求之前做些什么

//在请求头中添加token值，来获取个性化数据
// 1. 从pinia获取token数据
const userStore = useUserStore()
// 2. 按照后端的要求拼接token数据
const token = userStore.userInfo.token
if (token) {
  config.headers.Authorization = `Bearer ${token}`
}


  return config;
}, function (error) {
  // 对请求错误做些什么
  return Promise.reject(error);
});

// 添加响应拦截器
http.interceptors.response.use(function (response) {
  // 对响应数据做点什么
  return response;
}, function (error) {
  // 对响应错误做点什么

  //针对所有发送的请求来做一个共有的错误提示
  ElMessage.warning(error.response.data.message || '网络请求失败，请稍后再试')

  return Promise.reject(error);
});

export default http;//默认导出