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

758 ℃

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,我们会在看到邮件的第一时间内为您处理!

vue离线环境如何安装脚手架vue-cli
如何利用includes方法对数组去重
利用js做一个密码强度判断
wordpress技巧中如何实现日期归档页标题
Lunar组件获取指定月份的所有老黄历每日宜忌