axios 创建实例 添加请求拦截器

创建实例可以统一设置服务器

 let aa = axios.create({
        baseURL: 'http://localhost',
        timeout: 1000,
        headers: {'X-Custom-Header': 'foobar'}
    });

请求拦截器

//添加请求拦截器
    aa.interceptors.request.use(function (config) {
        //在发送请求之前做些什么
        let token = 'xxxxxxxxxxxx';
        if (['post', 'put', 'patch'].includes(config.method)) {
            config.data = {...config.data, token}
        } else if (['get', 'delete', 'request'].includes(config.method)) {
            config.params = {...config.params, token}
        }
        return config;
    }, function (error) {
        //对请求错误做些什么
        return Promise.reject(error)
    });
在 Vue.js 中,使用 axios 作为 HTTP 客户端库时,如果需要在所有请求之前或之后添加一些通用操作,比如发送认证信息、处理错误等,可以设置全局的请求拦截器。下面是在 Vue 项目中配置全局请求拦截器的步骤: 1. 首先,在你的 `src` 目录下创建一个名为 `api/index.js` 或类似文件,导入 Axios 和 Vue 实例。 ```javascript import axios from 'axios'; import { createApp } from 'vue'; const app = createApp(App); // 假设你已经有了 App 组件 // 创建 Axios 实例并配置全局拦截器 axios.defaults.headers.common['Content-Type'] = 'application/json'; // 设置默认请求头 app.config.globalProperties.$http = axios; // 将 Axios 对象挂载到 Vue 实例上,供组件访问 // 全局请求拦截器 axios.interceptors.request.use((config) => { // 在这里添加请求前的操作,如添加 token 或者校验登录状态 console.log('Request Interceptor:', config); return config; }, (error) => { // 请求失败时的处理 console.error('Error in Request Interceptor:', error); return Promise.reject(error); }); // 全局响应后拦截器 axios.interceptors.response.use( (response) => { // 成功响应的处理 console.log('Response Interceptor:', response.data); return response.data; }, (error) => { // 错误响应的处理 console.error('Error in Response Interceptor:', error.response); if (error.response.status === 401) { // 如果是未授权,可以在这里触发重定向或提示用户重新登录 // handleUnauthorized(error); } return Promise.reject(error); } ); export default axios; ``` 然后在你的 Vue 组件中就可以通过 `$http` 来发起请求了,例如: ```javascript export default { data() { return { message: '', }; }, methods: { fetchData() { this.$http.get('/api/data') .then(response => { // 使用响应数据 console.log(response); }) .catch(error => { this.message = 'An error occurred!'; }); }, }, }; ```
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值