react通过axios请求数据,用一个bol来判断数据是否加载完成后，渲染在页面上，不用async await和定时器的更好方法

在utils新建一个axios.js文件,封装axios的请求

import axios from 'axios'

// http://localhost:8888/https://cnodejs.org'
let baseURL = 'http://localhost:8089/'  // 本地服务器注意端口号,要不然报错   // https://cnodejs.org/api/v1

// 创建axios实例
const fetch = axios.create({
  baseURL: baseURL,
  timeout: 9000,  // 超时设置
  headers: {
    'Content-Type': 'application/json;charset=UTF-8'
  }
})

// 封装请求拦截器
fetch.interceptors.request.use((config) => {
  // 在这里做一些检测或者包装等处理
  // console.log('请求拦截', config)
  // 鉴权 token添加
  config.headers.Authorization = localStorage.getItem('token') || ''
  return config
})

// 封装响应拦截器
fetch.interceptors.response.use((response) => {
  // 请求成功
  console.log('响应拦截', response.data)
  // 数据过滤，根据后端标识字符来进行数据
  // if (response.data && response.data.status==200) {}  这是状态status为200 
  //  response.data.success
  if (response.data && response.data.success){
    return response.data.data
    // console.log(response,'res')
  } else {
    console.log('网络异步，请稍后再试')
  }
  // 下面是qq音乐的  判断
  // if(response.data ){
  //   return response.data
  // }
}, (error) => {
  // 请求失败
  return Promise.reject(error)
})

export default fetch
// 修改配置文件要重启项目

在setupProxy.js文件中，配置代理

const { createProxyMiddleware } = require('http-proxy-middleware')();
module.exports = function(app) {
  app.use(
    '/api',
    createProxyMiddleware({
      target: 'https://cnodejs.org',  // https://cnodejs.org/api/v1  这个是目标地址
      changeOrigin: true
    })
  );
  app.use(
    '/download',
    createProxyMiddleware({
      target: 'https://y.qq.com/',  
      changeOrigin: true
    })
  );
};

在utils中新建一个api.js的文件,提供请求的方法

mport axios from './axios'

export function getlist(params) {
  return axios({
    url: '/api/v1/topics',
    method: 'GET',
    params
  })
}
export function getlistqq(params){
  return axios({
    url: '/download/download.js',
    method: 'GET',
    params
  })
}
//  把所有的接口方法,统一抛出
export default {
  getlist,
  getlistqq
}

//  https://y.qq.com/download/download.js?format=jsonp&g_tk_new_20200303=5381
//  &jsonpCallback=MusicJsonCallback&loginUin=1831893458&hostUin=0&format=jsonp&
//  inCharset=utf8&outCharset=utf-8&notice=0&platform=yqq&needNewCode=0

在app.js 请求数据,并且把它渲染在页面上

import React from 'react';
import '@/assets/style/style.scss'
import  { getlist,getlistqq }  from '@/utils/api'
// 无状态组件,没有生命周期,没有状态 constructor,有render这个生命周期等
// function App() {
//   return (
//     <div className="App">
//       <header className="App-header">
//         <p className='test'>
//           {/* 效果没有出来,是没有引入样式 */}
//           Edit <code>src/App.js</code> and save to reload.qwjqw
//         </p>
//       </header>
//     </div>
//   );
// }
import Home  from '@/home'
class App extends React.Component{
  constructor(props){
    /*
      Line 19:5:  'this' is not allowed before 'super()' 
      no-this-before-super 没有定义super
    */
   super(props)
    this.state={
      arr:[],
      bol:false
    }
  }
  //   let params={
  //     page:1,
  //     tab: 'share',
  //     limit: 5,
  //     mdrender: true
  //   }
  //   getlist(params).then((res)=>{
  //     console.log('res',this.state.list)
  //   })
  // } // componentDidMount(){
 
  
  componentDidMount() {
    // let { arr }= this.state
    let params = {
      tab: '',
      page: 1,
      limit: 5
    }
     getlist(params).then(res=>{
      // this.state.arr=res
       this.setState({
        arr:res,
        // promise中格式中不用使用,async await 
        /* 
        刚开始在state中,定义一个bol为false,在渲染过程中,
        把bol为true,根据bol的值,来判断进行数据的渲染
        */
        bol:true
      })
      // console.log('res2', this.state.arr,res)
    })
    // ?format=jsonp&g_tk_new_20200303=5381&jsonpCallback=MusicJsonCallback&loginUin=1831893458&hostUin=0&format=jsonp
    // &inCharset=utf8&outCharset=utf-8&notice=0&platform=yqq&needNewCode=0
    // let params1={
    //   format:'jsonp',
    //   g_tk_new_20200303:'5381',
    //   jsonpCallback:'MusicJsonCallback',
    //   loginUin:'1831893458',
    //   hostUin:0,
    //   format:'jsonp',
    //   inCharset:'utf8',
    //   outCharset:'utf8',
    //   notice:0,
    //   platform:'yqq',
    //   needNewCode:0
    // }
    // getlistqq(params1).then(res=>{
    //   console.log(res,'qq音乐的数据')
    // })
    // console.log('res3',this.state.arr)
    // this.handClick()
  }
  handClick(){
    let { arr } =this.state
    console.log('arr1',arr)
    // return ()=>() ()=>{return ()}   
    return arr.map((ele,index)=>(
      <div key={ele.id}>
          {/* <li>{ele.id}</li>
          <li>{ele.content}</li> */}
          <span style={{padding:'10px'}}>{ele.id}</span>
          <span>{ele.title}</span>
      </div>
    ))
  }
   render(){
     let { bol } =this.state
     return(
       <div className="App">
          <header className="App-header">
          {/* <button onClick={this.handClick.bind(this)}>电机</button> */}
            <div>
              {/* 
                先判断bol的真假,在渲染数据,相当异步执行完毕,在执行渲染数据
                */}
              {bol?this.handClick():'数据没有渲染出来'}
              <Home></Home>
            </div>
          </header>
       </div>
     )
   }
}

export default App;

注意：没有用mobx和redux数据的状态管理,利用componentDidMount()在这个生命周期中,它会请求两次