axios获取数据

上一篇文章，讲解了如何新增和删除todo，这一篇我们用axios获取后台数据，渲染列表

后台接口 我们用koa搭建一个后台接口 接口地址http://localhost:3333/api/list

实际做起来遇到了跨域问题，当然可以用proxy代理，不过这里我们直接修改谷歌浏览器参数，开启跨域就好了

修改谷歌浏览器
在快捷方式-目标 后面添加如下命令

 --disable-web-security

我们再koa定义接口

let list={
	"code":"200",
	"message":"success",
	"data":['好好学习react2','每天听歌跑跑步2','和儿子康康乐乐一起玩耍2']
}
router.get('/list',async (ctx)=>{
    ctx.body=list;
});

在todo.js
//组件初始化完毕调用接口，获取数据

cnpm  install axios --save
import  axios from 'axios';

componentDidMount(){
		let  api = "http://localhost:3333/api/list";
		axios.get(api).then((res)=>{
			console.log(res.data.data);
			let  list =res.data.data;
			const  action  = getDataAction(list);
			store.dispatch(action);
		}).catch(err=>{
			console.log(err)
		});
	};

定义一个类型
actionTypes.js

export const GETDATA = 'getData';

定义一个action
actionCreaters.js

import {CHANGEINPUT,ADDITEM,DELETEITEM,GETDATA} from './actionTypes.js';
//从后台获取数据
export const getDataAction = (data)=>({
	type:GETDATA,
	data
});

ps：这里就是从接口获取数据，放入getDataAction中去，把数据返回出去后，再dispatch分发，然后具体业务再reducer中实现
reducer.js

import {CHANGEINPUT,ADDITEM,DELETEITEM,GETDATA} from './actionTypes';
	//从后台获取数据 
	if(action.type===GETDATA){
		let  newState = JSON.parse(JSON.stringify(state));
		newState.list=action.data;
		return newState;
	};

好了，基本大功告成~

现在我们讲解第二种跨域的方法，感觉这个比较使用，话不多说上代码
2:http-proxy-middleware

//安装插件
cnpm  install http-proxy-middleware

然后再src下面新建一个setupProxy.js

// setupProxy.js
const proxy = require('http-proxy-middleware')

module.exports = function(app) {
  app.use(
    proxy('/api', {  //`api`是需要转发的请求 
      target: 'http://localhost:3333',  // 这里是接口服务器地址
      changeOrigin: true,
    })
  )
}

ps:看到没，我们这里跨域访问是

效果是一样一样的

OK，大功告成，跨域成功