// axios请求拦截器
httpInstance.interceptors.request.use(config => {
console.log('请求拦截器',config);
const userStore = useUserStore()
const token = userStore.userInfo.token
if(token){
//固定写法
config.headers.Authorization = `Bearer ${token}`
//注意Bearer后面的空格
}
return config
}, e => Promise.reject(e))
对于三者放在Service.js中封装，方便使用
axios.create 的作用是创建一个新的 axios 实例，该实例可以具有自定义配置。
通过使用 axios.create，您可以为任何 API 生成一个客户端，并在使用同一客户端的任何调用中重复使用相同的配置。
这使得在应用程序中使用多个 API 时更加方便，因为您可以为每个 API 创建一个单独的实例，并在每个实例中设置不同的配置。
axios.create 方法接受一个配置对象作为参数，该对象包含以下属性：
baseURL：用于所有请求的基本 URL。headers：要发送的自定义 headers。timeout：指定请求超时之前的毫秒数。withCredentials：指示是否应该使用跨站点访问控制（CORS）凭据。xsrfCookieName：用作 xsrf 令牌值的cookie的名称。xsrfHeaderName：包含 xsrf 令牌值的 HTTP 头的名称。例如，以下代码创建了一个新的 axios 实例，并将其配置为使用 /api/ 作为基本 URL：
const instance = axios.create({
baseURL: '/api/'
});// 用create创建axios实例
const Service = axios.create({
timeout: 3000,
baseURL: 'http://127.0.0.1:8888/api/private/v1/',
headers: { 'Content-type': 'application/json;charset=utf-8' }
})
// get 数据请求封装
export const get = config => {
return Service({
...config,
method: 'get',
data: config.data,
})
}
// post 数据请求封装
export const post = config => {
return Service({
...config,
method: 'post',
data: config.data,
})
}在 Vue3 中，可以使用 Axios 库来进行 HTTP 请求。Axios 库提供了请求拦截器和响应拦截器，以便在请求发送和响应返回时执行一些操作。
请求拦截器可以用于在请求发送前执行一些操作，例如添加 token、设置请求头等。响应拦截器可以用于在响应返回后执行一些操作，例如处理错误信息、剥离无效数据等。
let loadingObj = null;
// 请求拦截，增加loading，对请求统一处理
Service.interceptors.request.use((config) => {
loadingObj = ElLoading.service({
lock: true,
text: 'Loading',
background: 'rgba(null, 0, 0, 0.7)',
})
return config;
})
// 相应拦截，对返回值做同意处理
Service.interceptors.response.use(response => {
loadingObj.close();
const data = response.data;
if (!data.data) {
ElMessage.error(data.meta.msg || '服务器错误')
}
else {
ElMessage({
message: '登录成功',
type: 'success',
duration: 1500
})
}
return response.data;
}, error => {
loadingObj.close();
ElMessage({
message: '服务器错误',
type: 'error',
duration: 2000
})
})import { get, post } from './service'
// 登录数据请求
export const loginAPI = data => {
return post({
url: '/login',
data
})
}以上为个人经验，希望对您有所帮助。