react项目执行流程（下--发送数据）

封装axios，定义ajax请求模块函数
1.安装axios
npm install axios
访问数据库时遇到问题：一定注意查看哪个是数据库的主节点

脚手架配置代理解决ajax跨域的方法：
【注意：】修改package.json文件，并重新启动脚手架，注意不是服务器

import axios from 'axios'
axios.get('http://localhost:3000/login')
.then(function (response) {
	console.log(response.data);
})
.catch(function (error) {
	console.log(error);
})
.then(function () {
});

统一暴露：
export default{
        xxx(){...},
        yyy(){...}
    }
分别暴露：
export function xxx(){...}
export function xxx(){...}

jsonp:只能处理get请求跨域
cors:
项目中：代理

关于async 和await
1.作用：
简化promise对象的使用，不再使用then()来指定成功/失败的回调函数
以同步编码方式实现异步流程
2.哪里写async：
await所在函数定义的左侧
3.哪里写await：
在返回promise表达式的左侧写
4.错误处理：try，catch

举例：login.jsx文件
写法一：
reqLogin(username,password)
.then(function (response.data) {
	console.log(response);
})
.catch(function (error) {
	console.log(error);
});
写法二：
try{
	const response = await reqLogin(username,password)
	console.log('请求成功',response.data)
}catch(error){
	console.log('请求失败',error)
}  

优化ajax请求函数模块--统一处理请求异常

#在外层包一个自己创建的promise对象
#在请求出错时，不reject(error),而是显示错误提示

import {message} from 'antd'
  @return new Promise((resolve,reject)=>{
        @let promise
        //1.执行异步ajax请求      
        if(type==='GET'){
            @promise = axios.get(url,{
                params: data
            })
        }else{
            @promise = axios.post(url,data)
        }
        //2.如果成功了，调用resolve(value)
        promise.then(response=>{
            resolve(response)
        //3.如果失败了，不调用reject(reason)，而是提示异常信息
        }).catch(err=>{
            @// const error = () => {  可写可不写
                message.error('请求出错了：'+err.message);
            @// };
        })
    })

修改：login.jsx文件
删除try{}catch(){}结构
const {username,password} = values;
const response = await reqLogin(username,password)
console.log('请求成功',response.data)

*转载服务器获取前端数据