8. 使用 axios 获取数据

RESTful

全称

REpresentational State Transfer 表征性状态转移

特点

• 无状态
• 面向 “资源”，URL里只有名词没有动词
• 使用HTTP的动词
  • GET 查看
  • POST 创建
  • PUT 更新
  • PATCH 部分更新
  • DELETE 删除
• HATOAS 超媒体即应用状态引擎

适用性

• 面向资源好用，如增删改查
• 面向过程不好用，如登录

Axios的使用

发音

/æk’siəʊ:s/

优点

• 简单易用，API接近于jQuery, 比原生的fetch简单
• 浏览器兼容性好，能兼容IE7, 使用fetch就得自己处理兼容
• 通用性好，能在node和浏览器中使用，api一致

安装

yarn add axios

在类组件中使用

异步请求应放在 componentDidMount阶段

import axios from 'axios'
interface State {
  productList: any[]
}
class HomePageComponent extends React.Component<WithTranslation, State> {
  constructor(props){
    super(props)
    this.state = {
      productList: []
    }
  }
  async componentDidMount(){
    const {data} = await axios.get('/api/productCollections')
    this.setState({productList: data})
  }
  render() {
    // ...
  }
}

处理数据悬空状态

因为数据是在componentDidMount阶段才请求的，当生成虚拟DOM时，render函数已经执行了，此时会因为没有数据而报错, 解决办法

• 使用loading标志，数据未加载则显示动画，
• 使用error标志，请求数据失败则显示错误信息 ```tsx import { Spin } from ‘antd’ import axios from ‘axios’

interface State { loading: boolean, error: string | null productList: any[], }

class HomePageComponent extends React.Component { constructor(props){ super(props) this.state = { loading: true, error: null, productList: [] } }

async componentDidMount(){ try { const {data} = await axios.get(‘/api/productCollections’) console.log(data) this.setState({ loading: false, error: null, productList: data }) }catch(error: any) { this.setState({ error: error.message, loading: false }) }

}

render() { const { t } = this.props const {productList, loading, error} = this.state if(loading) { console.log(‘loading: true’) return }

if(error) {
  return <div>网站出错: {{error}}</div>
}

return ( // … ) } ```

什么是MVC?

MVC是一种架构模式，也是一种思想，用于分离数据模型、UI显示和逻辑控制

• M(model)
• V(view)
• C(controller)

React不提倡使用MVC，MVC会造成数据双向绑定，React是MVVM