axios封装固定套路 , vue中路由配置项

前言: 前端开发中,为了方便获取数据使用ajax,我们经常需要下载axios,发请求是前端开发中最常见的动作,所以为了方便开发,也为了让代码更好维护,经常需要对axios二次封装

// 下面是axios二次封装的固定套路, 仅供参考

    import axios from 'axios'

const instance = axios.create({
  // 请求基地址
  baseURL: '这里是基地址',
  // 最长等待时间，如果超过了这个时间，就报错
  timeout: 5000
})

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

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

export default instance

记录 Vue3中 路由配置

    const router = createRouter({
  history: createWebHashHistory(), // 这里控制路由模式
  scrollBehavior: () => { // 这个控制路由跳转后距顶部距离
    return {
      top: 0 //控制路由跳转后导航条距离顶部位置
    }
  },
  routes: [
    {
      path: '/',
      component: Layout,
      children: [
        {
          path: '', // 给'' 是默认加载它
          component: Home
        }
      ]
    },
    {
      path: '/login',
      component: () => import('@/views/Login/Login.vue') // 懒加载
    }
  ]
})



export default router