vue3中axios如何封装拦截器配置请求

vue3开发中如何实现axios请求拦截器配置​和响应拦截器配置，下面web建站小编给大家简单介绍一下！​

axios基础配置

import axios from 'axios'
 
//自动加在url前面
axios.defaults.baseURL = 'https://api.ipkd.cn'
//超时时间 
axios.defaults.timeout = 5000
//跨域凭证
axios.defaults.withCredentials = false
 
//响应和请求 拦截器配置
export default axios

请求拦截器配置

axios.interceptors.request.use(config => {
  console.log(config)
  return config
}, error => {
  Promise.reject(error)
})

响应拦截器配置

axios.interceptors.response.use(res => {
  if (typeof res.data !== 'object') {
    Message.error('返回数据不是对象！')
    return Promise.reject(res)
  }
  if (res.data.code !== 200 ){
    Message.error('返回码不等于200')
  }
  return res.data
}, error => {
  Message.error('网络异常')
  Promise.reject(error)
})

vue接口封装中的环境的切换

盘点vue3的各种生命周期

Vue中Axios常用方法有哪些？

Vue中如何实现封装请求方法

Vue中如何实现Axios封装

标签： axios基础配置, axios封装, axios拦截器配置, vue3语法

上面是“vue3中axios如何封装拦截器配置请求”的全面内容，想了解更多关于 vuejs 内容，请继续关注web建站教程。

当前网址：https://m.ipkd.cn/webs_4762.html

声明：本站提供的所有资源部分来自互联网，如果有侵犯您的版权或其他权益，请发送到邮箱：admin@ipkd.cn，我们会在看到邮件的第一时间内为您处理！