主页（四）-轮播图——Carousel 走马灯组件 & axios-配置请求基准路径和配置响应拦截器

主页（四）-轮播图——Carousel 走马灯组件 & axios-配置请求基准路径和配置响应拦截器

Carousel 走马灯组件：https://mobile.ant.design/components/carousel-cn/

• 基本布局配置

<Carousel autoplay={this.state.isLoaded} infinite>
  {this.state.swipers.map(item => (
    <a
      key={item.id}
      href="http://www.itcast.com"
      style={{
        display: 'inline-block',
        width: '100%',
        height: this.state.imgHeight
      }}
    >
      <img
        src={`http://localhost:8080${item.imgSrc}`}
        alt="图片无法显示"
        style={{ width: '100%', verticalAlign: 'top' }}
        onLoad={() => {
          // 窗口尺寸变化时->触发resize事件->重新设置动态高
          window.dispatchEvent(new Event('resize'))
          this.setState({ imgHeight: 'auto', isLoaded: true })
        }}
      />
    </a>
  ))}
</Carousel>

静态轮播图

• 对接后台接口数据
  • 安装axios包
    • yarn add axios
  • 导入axios
    • import axios from ‘axios’

index.js中

  // 轮播图数据加载
  loadSwiper = async () => {
    let res = await axios.get('http://localhost:8080/home/swiper')
    this.setState({
      swiper: res.data.body
    })
  }
  componentDidMount () {
    this.loadData()
  }

App.js中

import axios from 'axios'
// 配置请求基准路径
axios.defaults.baseURL = 'http://localhost:8080/'
// 配置响应拦截器
axios.interceptors.response.use((res) => {
  return res.data
})

最终效果