Vue3+TS Day32 Element-plus、axios

一、element-plus

1、element-plus适用于环境？

• 适用于【vue3】的【桌面端】【组件库】
• 如果是在移动端推荐使用vantUI

2、全局引用和按需引用的优缺点

• 【全局引用】：使用方便；但是会全部打包。
• 【按需引用】：包会小一些；但是引用起来麻烦一些。

二、axios

1、http://httpbin.org/ 是做啥的？

• 用于服务器的get和post请求，方便测试移动端的网络框架

2、在axios里面，如果有多个请求需要同时返回结果在处理，要怎么办？

-【axios.all】

3、如何在axios发送请求之前，或者收到请求之后，做一个拦截呢？

• axios.interceptors.request
• axios.interceptors.response

// 拦截器
// fn1: 请求发送会执行的函数
// fn2: 请求发送失败会执行的函数
axios.interceptors.request.use(
  (config) => {
    //想做的一些操作
    // 1.给请求添加token
    // 2.isLoading动画
    console.log('请求成功拦截')
    return config
  },
  (err) => {
    console.log('请求发送失败拦截')
    return err
  }
)

axios.interceptors.response.use(
  (config) => {
    console.log('服务器相应成功拦截')
    return config
  },
  (err) => {
    console.log('服务器相应失败拦截')
    return err
  }
)

4、如何在vue项目中区分正式环境、测试环境、开发环境？

• 掌握方式二即可

let BASE_URL = ''
const TIME_OUT = 10000

if (process.env.NODE_ENV === 'development') {
  BASE_URL = 'http://123.207.32.32:8000/'
} else if (process.env.NODE_ENV === 'production') {
  BASE_URL = 'http://coderwhy.org/prod'
} else {
  BASE_URL = 'http://coderwhy.org/test'
}

export { BASE_URL, TIME_OUT }

image.png