在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¬ice=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¬ice=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()在这个生命周期中,它会请求两次