Vue添加请求拦截器

一、现象

统一处理错误及配置请求信息

 

二、解决

1、安装 axios  , 命令: npm install axios --save-dev

2、在根目录的config目录下新建文件 axios.js  ,内容如下:

import axios from 'axios'

// 配置默认的host,假如你的API host是:http://api.htmlx.club
axios.defaults.baseURL = 'http://api.htmlx.club'    

// 添加请求拦截器
axios.interceptors.request.use(function (config) {
  // 在发送请求之前做些什么
  return config
}, function (error) {
  // 对请求错误做些什么
return Promise.reject(error)
});

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

 

3、在main.js中进行引用,并配置一个别名($ajax)来进行调用:

import axios from 'axios'
import '../config/axios'

Vue.prototype.$ajax = axios

如图:

 

 

4、应用,一个登录的post如:

this.$ajax({
  method: 'post',
  url: '/login',
  data: {
    'userName': 'xxx',
    'password': 'xxx'
  }
}).then(res => {
  console.log(res)
})

三、总结

统一处理方便

 

例:

使用iview框架,在main.js添加请求接口拦截器 loading

axios.interceptors.request.use(function (config) {
  iView.LoadingBar.start()
  return config
}),function (error) {
  iView.LoadingBar.error()
  return Promise.reject(error)
}
axios.interceptors.response.use(function (config) {
  iView.LoadingBar.finish()
  return config
}),function (error) {
  iView.LoadingBar.error()
  return Promise.reject(error)
}

 

/**
 * @export
 * @param {any} request
 * @param {any} next
 * @returns
   */
import store from './vuex/store'
// 全局错误处理,全局loading
import { setLoading, setTip } from './vuex/actions/doc_actions'
export default function (request, next) {
  if (request.tip !== false) {
    setLoading(store, true)
  }
  next((res) => {
    setLoading(store, false)
    let data = JSON.parse(res.data)
    if (res.status === 0) {
      setTip(store, {
        text: '网络不给力,请稍后再试'
      })
    }
    if (!data.success) {
      setTip(store, {
        text: data.error_msg
      })
    }
  })
}

 

转载于:https://www.cnblogs.com/zhoubingyan/p/8623509.html

### Vue3 Axios 请求拦截器配置及使用方法 #### 创建 Axios 实例 为了更好地管理和扩展 HTTP 请求,在 `src/utils` 文件夹内创建一个新的 JavaScript 文件,命名为 `http.js` 或者 `axiosInstance.js`。在此文件中初始化 Axios 并设置默认的基础 URL 和其他选项。 ```javascript // src/utils/axiosInstance.js import axios from 'axios'; const service = axios.create({ baseURL: import.meta.env.VITE_APP_BASE_API, // 设置基础URL timeout: 5000 // 超时时间 }); export default service; ``` #### 配置请求拦截器 通过添加请求拦截器可以在每次发起请求之前处理一些逻辑,比如加入身份验证令牌等操作。这有助于保持代码的一致性和减少重复工作量[^1]。 ```javascript service.interceptors.request.use( config => { const token = localStorage.getItem('token'); if (token) { config.headers['Authorization'] = `Bearer ${token}`; } return config; }, error => Promise.reject(error) ); ``` #### 定义是否刷新 Token 变量及存储请求队列数组 为了让应用程序能够自动刷新过期的身份认证Token而不影响用户体验,可以定义一个标志位来指示当前是否有正在进行中的Token刷新过程,并维护一个待执行的请求列表以便稍后重试这些被中断的任务。 ```javascript let isRefreshing = false; // 是否正在刷新Token let requestsQueue = []; // 存储因缺少有效Token而暂停的请求 function retryOriginalRequest(config) { return new Promise((resolve) => { requestsQueue.push(() => resolve(service(config))); }); } ``` #### 响应拦截器及其无感刷新 Token 功能实现 每当接收到服务器返回的数据之后都会经过响应拦截器,这里不仅可以统一处理错误信息还可以检测到401状态码从而触发Token刷新机制。一旦新的Token获取成功,则会再次尝试那些因为旧Token失效而失败的请求。 ```javascript service.interceptors.response.use( response => response.data, async error => { const originalConfig = error.config; if (error.response.status === 401 && !originalConfig._retry) { if (isRefreshing) { return new Promise((resolve) => { requestsQueue.push(() => resolve(service(originalConfig))); }); } originalConfig._retry = true; isRefreshing = true; try { await refreshAccessToken(); // 自定义函数用于向服务端申请新Token requestsQueue.forEach(callback => callback()); requestsQueue = []; return service(originalConfig); // 使用最新Token重新发送原始请求 } catch (_error) { console.error(_error.message || 'Failed to get a fresh access token.'); } finally { isRefreshing = false; } } return Promise.reject(error); } ); async function refreshAccessToken() { // 这里应该是一个实际调用API的方法去换取最新的access_token // ... } export { service as axios }; ``` 上述代码展示了如何在一个Vue3项目中配置Axios实例以及其请求和响应拦截器的功能,特别是关于无感知地刷新访问令牌的部分。这样做的好处是可以让前端应用更加健壮可靠,同时也提高了用户的体验质量。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值