1.设置 setTimeout定时器，通过延迟下一操作的执行时间，来解决ajax网络请求和下一操作异步的冲突（注意：时长的设置要大于等于网络请求的执行时间），代码如下
// 定义状态机
    constructor(props, context) {
        super(props, context);
        this.state = {
            content:null
        }
    }
//网络请求方法
Add = () => {  
    var formData = new FormData($("#userForm")[0]);  // 定位到userForm表单，并将表单定位转为FormData对象  
    $.ajax({  
      url: '/add',   //网络请求url地址  
      type: 'POST',  
      data: formData, //表单数据  
      cache: false,  
      contentType: false,  //或者 contentType:multipart/form-data均可以，multipart/form-data表示可以上传下载文件（既可以发送文本数据，也支持二进制数据上载），表明传输的数据要用到多媒体传输协议，由于多媒体传输的都是大量的数据，所以规定上传文件必须是post方法；contentType默认为application/x-www-form-urlencoded不能上传文件  
      processData: false,  
      success: function (data) {  
        console.log('成功'); this.setState({content:'修改成功'}) 
      }.bind(this),  
      error: function (xhr, status, err) {  
      }.bind(this)  
    });  
  }  
//执行操作
this.add();
setTimeout(() => {
               if(this.state.content=='修改成功'){alert('修改成功')}
				else{alert('修改失败')}
            }, 1000);
//如果不加1秒定时延迟，会直接进行判断，即未等网络请求结束便进行了判断

2.设置 ajax中参数async的属性
async：要求为Boolean类型的参数，默认设置为true，所有请求均为异步请求。如果需要发送同步请求，请将此选项设置为false。注意，同步请求将锁住浏览器，用户其他操作必须等待请求完成才可以执行。
通过该方式解决1中的异步问题，加上async:false, 代码如下
/ 定义状态机
    constructor(props, context) {
        super(props, context);
        this.state = {
            content:null
        }
    }

//网络请求方法
Add = () => {  
    var formData = new FormData($("#userForm")[0]);  // 定位到userForm表单，并将表单定位转为FormData对象  
    $.ajax({  
      url: '/add',   //网络请求url地址  
      type: 'POST',  
      data: formData, //表单数据 
	  async:false, 
      cache: false,  
      contentType: false,  //或者 contentType:multipart/form-data均可以，multipart/form-data表示可以上传下载文件（既可以发送文本数据，也支持二进制数据上载），表明传输的数据要用到多媒体传输协议，由于多媒体传输的都是大量的数据，所以规定上传文件必须是post方法；contentType默认为application/x-www-form-urlencoded不能上传文件  
      processData: false,  
      success: function (data) {  
        console.log('成功'); this.setState({content:'修改成功'}) 
      }.bind(this),  
      error: function (xhr, status, err) {  
      }.bind(this)  
    });  
  }  
//执行操作
this.add();
if(this.state.content=='修改成功'){alert('修改成功')}
else{alert('修改失败')}

异步问题
1. 设置setTimeout来延迟下一步操作的执行时间，来解决ajax网络请求和下一步操作的异步冲突。需要注意的是，
   定时器的时间设置一定要大于等于网络请求的时间。
   代码如下：
// 定义状态机
    constructor(props, context) {
        super(props, context);
        this.state = {
            content:null
        }
    }
//网络请求方法
Add = () => {  
    var formData = new FormData($("#userForm")[0]);  // 定位到userForm表单，并将表单定位转为FormData对象  
    $.ajax({  
      url: '/add',   //网络请求url地址  
      type: 'POST',  
      data: formData, //表单数据  
      cache: false,  
      contentType: false,  //或者 contentType:multipart/form-data均可以，multipart/form-data表示可以上传下载文件（既可以发送文本数据，也支持二进制数据上载），表明传输的数据要用到多媒体传输协议，由于多媒体传输的都是大量的数据，所以规定上传文件必须是post方法；contentType默认为application/x-www-form-urlencoded不能上传文件  
      processData: false,  
      success: function (data) {  
        console.log('成功'); this.setState({content:'修改成功'}) 
      }.bind(this),  
      error: function (xhr, status, err) {  
      }.bind(this)  
    });  
  }  
//执行操作
this.add();
setTimeout(() => {
               if(this.state.content=='修改成功'){alert('修改成功')}
				else{alert('修改失败')}
            }, 1000);
//如果不加1秒定时延迟，会直接进行判断，即未等网络请求结束便进行了判断

2. 设置ajax的async属性
   async默认属性是true，表示异步执行， 如果需要同步请求，则修改成false
   注意async为false的时候，这时候锁住了浏览器，用户其他操作都必须等到网络请求完成后才能执行。
/ 定义状态机
    constructor(props, context) {
        super(props, context);
        this.state = {
            content:null
        }
    }

//网络请求方法
Add = () => {  
    var formData = new FormData($("#userForm")[0]);  // 定位到userForm表单，并将表单定位转为FormData对象  
    $.ajax({  
      url: '/add',   //网络请求url地址  
      type: 'POST',  
      data: formData, //表单数据 
	  async:false, 
      cache: false,  
      contentType: false,  //或者 contentType:multipart/form-data均可以，multipart/form-data表示可以上传下载文件（既可以发送文本数据，也支持二进制数据上载），表明传输的数据要用到多媒体传输协议，由于多媒体传输的都是大量的数据，所以规定上传文件必须是post方法；contentType默认为application/x-www-form-urlencoded不能上传文件  
      processData: false,  
      success: function (data) {  
        console.log('成功'); this.setState({content:'修改成功'}) 
      }.bind(this),  
      error: function (xhr, status, err) {  
      }.bind(this)  
    });  
  }  
//执行操作
this.add();
if(this.state.content=='修改成功'){alert('修改成功')}
else{alert('修改失败')}

提高用户体验-beforeSend&complete
场      景：在ajax发送网络请求的时候，用户重复点击提交按钮，造成后台存储了重复的数据
解决方案：在提交ajax的时候，有全局事件和局部事件在执行，详情查看ajax-全局事件，
                beforeSend和complete函数属于局部事件。
异步与同步操作下beforeSend和complete的区别：
        var obj=0;
        $.ajax({
            url:"../data/test.txt",
            contentType:"application/json",
            type:"POST",
            cache:false,
            async:true,
            beforeSend:function(){
                $('#queryForm').hide();
            },
            success:function(result){
                obj=result;
            },
            complete:function(){
            }

        });
        console.log(obj);
    });
}  
async：true  这种情况是异步方式，当ajax发送请求前，会先执行ajax块中beforeSend里面的代码，如果beforeSend里面有Dom的操作，就可以立即对Dom进行渲染，当ajax发送请求后，在等待server端返回数据的过程中，程序会继续执行ajax外面的代码块，知道服务器返回正确的结果才会去执行success方法，因此，在执行success前，Dom隐藏，obj为0
async：flase 这时候ajax请求是同步的，这样的话，当ajax发送请求前，回西安之行ajax块中beforeSend路面的代码，如果beforeSend里面的代码有Dom操作，不会立即对Dom渲染，而是等到complete执行完成之后，才会渲染Dom，当ajax发送请求成功之后，才会执行ajax块外面的代码，因此，在执行完成complete之后，Dom才隐藏，obj=result

可以解决的场景：
1 防止重复数据
// 提交表单数据到后台处理
$.ajax({
    type: "post",
    data: studentInfo,
    contentType: "application/json",
    url: "/Home/Submit",
    beforeSend: function () {
        // 禁用按钮防止重复提交
        $("#submit").attr({ disabled: "disabled" });
    },
    success: function (data) {
        if (data == "Success") {
            //清空输入框
            clearBox();
        }
    },
    complete: function () {
        $("#submit").removeAttr("disabled");
    },
    error: function (data) {
        console.info("error: " + data.responseText);
    }
});
2 模拟Toast效果
ajax请求服务器加载数据列表的时候显示loading('加载中，请稍后......')
$.ajax({
    type: "post",
    contentType: "application/json",
    url: "/Home/GetList",
    beforeSend: function () {
        $("loading").show();
    },
    success: function (data) {
        if (data == "Success") {
            // ...
        }
    },
    complete: function () {
        $("loading").hide();
    },
    error: function (data) {
        console.info("error: " + data.responseText);
    }
});

在弄清楚React中的Ajax的使用之前，首先需要理解如下的一些概念
异步&回调函数
异步
在JavaScript的世界中，所有代码都是单线程执行的。
由于这个“缺陷”，导致JavaScript的所有网络操作，浏览器事件，都必须是异步执行。异步执行可以用回调函数实现。
function a(){
console.log('执行a');
setTimeout(function(){
console.log('a执行完毕')
},1000)
};
function b(){
console.log('执行b')
};
a();
b();
最终的运行结果为
执行a
执行b
a执行完毕
以上代码会先执行函数a,而且不会等到a中的延迟函数执行完才执行函数b, 在延迟函数被触发的过程中就执行了函数b,当js引擎的event 队列空闲时才会去执行队列里等待的setTimeout的回调函数，这就是一个异步的例子
即使时间设置为0，也是会照样先执行函数b
回调函数
在异步执行的模式下，每一个异步的任务都有其自己一个或着多个回调函数，这样当前在执行的异步任务执行完之后，不会马上执行事件队列中的下一项任务，而是执行它的回调函数，而下一项任务也不会等当前这个回调函数执行完，因为它也不能确定当前的回调合适执行完毕。例如：上述代码中的setTimeout就是一个回调函数。
在实际体验中，当我们访问购物网站时，浏览器请求加载图片资源是一个耗时操作，网络条件差时，会导致图片加载很慢。但是此时我们仍然可以点击购物按钮完成购物的操作。这是因为图片加载(Ajax)是一个异步请求。它并不会因为图片加载事件而阻塞其它JS事件
callback.PNG
Promise
Ajax是一个典型的异步操作
request.onreadystatechange = function () {
if (request.readyState === 4) {
if (request.status === 200) {
return success(request.responseText);
} else {
return fail(request.status);
}
}
}
以上代码，Ajax根据网络请求的返回的状态码(请求成功还是失败)来决定执行回调函数success(request.responseText)或fail(request.status)。
这样不好看，而且不利于代码复用。而且要想做多重的异步操作，会导致经典的回调地狱
doSomething(function(result) {
doSomethingElse(result, function(newResult) {
doThirdThing(newResult, function(finalResult) {
console.log('Got the final result: ' + finalResult);
}, failureCallback);
}, failureCallback);
}, failureCallback);
Promise的基本使用
doSomething()
.then(result => doSomethingElse(value))
.then(newResult => doThirdThing(newResult))
.then(finalResult => console.log(`Got the final result: ${finalResult}`))
.catch(failureCallback);
Promise最大的好处是在异步执行的流程中，把执行代码和处理结果的代码清晰地分离了
promise流程图.PNG
Promise对象doSomething()是异步的，当他在某个时间点执行成功后，会去回调then后面的doSomethingElse()；doSomethingElse()也是异步的，当他执行成功后，会去回调doThirdThing()；以此类推，形成了一个Promise链。
在回调地狱示例中，有 3 次 failureCallback 的调用，而在 Promise 链中只有尾部的一次调用。通常，一遇到异常抛出，promise 链就会停下来，直接调用链式中的 catch 处理程序来继续当前执行。
Promise的并行执行
除了串行执行若干异步任务外，Promise还可以并行执行异步任务。它依赖于前置的多个Promise对象，只有当这些Promise对象全部执行成功后，才会去执行then后面的回调函数。例如下面的promise对象p1和p2,这两个任务是可以并行执行的，用Promise.all()实现
var p1 = new Promise(function (resolve, reject) {
setTimeout(resolve, 500, 'P1');
});
var p2 = new Promise(function (resolve, reject) {
setTimeout(resolve, 600, 'P2');
});
// 同时执行p1和p2，并在它们都完成后执行then:
Promise.all([p1, p2]).then(function (results) {
console.log(results); // 获得一个Array: ['P1', 'P2']
});
有些时候，多个异步任务是为了容错。多个Promise对象只需要执行成功一个即可。只需要获得先返回的结果即可。例如下面例子，由于p1执行较快，Promise的then()将获得结果'P1'。p2仍在继续执行，但执行结果将被丢弃这种情况下，用Promise.race()实现。
var p1 = new Promise(function (resolve, reject) {
setTimeout(resolve, 500, 'P1');
});
var p2 = new Promise(function (resolve, reject) {
setTimeout(resolve, 600, 'P2');
});
Promise.race([p1, p2]).then(function (result) {
console.log(result); // 'P1'
});
接下来进入正题
React AJAX请求
常见的五种请求方案：
jQuery $.ajax
Fetch API
SuperAgent
Axios
Request
这五种方案我并未全部用过，具体用法请参见：
Axios初体验
axios基于promise用于浏览器和node.js的http客户端，具有如下特点：
支持浏览器和node.js
支持promise
能拦截请求和响应
能转换请求和响应数据
能取消请求
自动转换JSON数据
浏览器端支持防止CSRF(跨站请求伪造)
axios是基于ajax的一次封装。在实际工程中，接口统一规范好后，各组件axios的请求部分基本一致，因此可以将该部分分离出来做二次封装。被调用时接受组件传入的url等参数。其中baseURL会自动加入到url参数之前
import axios from 'axios'
import {Modal} from 'antd'
export default class Axios {
static ajax(options){
return new Promise((resolve,reject) => {
axios({
url: options.url,
baseURL:' https://www.easy-mock.com/mock/5d2bb8f85fb7810a6be03487/baseEndManager',
method: 'get',
timeout: 5000,
}).then((response) => {
if(response.status === 200){
let res = response.data;
resolve(res);
}else{
Modal.info({
title: "警告",
content: "请求失败"
})
reject(response.data);
}
})
})
}
}
然后在不同的组件中调用axios时只需要传入URL等参数即可。接着将返回的response根据不同组件进行不同的解析。然后传入state中，从而达到渲染组件的目的。本例使用的mock数据，接口地址在此
import { Table,Card,Button } from 'antd';
import React from 'react'
// import userList from './../../config/userConfig'
import axios from './../../axios/index.js'
export default class User extends React.Component {
constructor(props){
super(props);
this.state = {
datasource: [],
}
}
componentDidMount(){
this.request();
}
request = () => {
axios.ajax({
url: '/users',
}).then((res)=>{
let userlist = res.result.list.map((item) => {
item.key = item.id;
return item;
});
this.setState({
datasource: userlist,
});
})
}
render(){
const columns = [
{
title: 'ID',
dataIndex: 'id',
},
{
title: '姓名',
dataIndex: 'name',
},
{
title: '年龄',
dataIndex: 'age',
},
{
title: '籍贯',
dataIndex: 'city',
},
{
title: '电子邮件',
dataIndex: 'email',
},
{
title: '入职时间',
dataIndex: 'date',
},
]
return(
编辑
)
}
}
Axios实际体验
在实践过程中，体会到Axios基于ajax和promise的特点，决定了axios是一个异步的过程。这个特点在使用echarts时会踩坑。
假设需要使用echarts制作条形图，数据需要通过axios从接口获取，由于echarts的条形图是在componentDidMount()中初始化和设置数据的。如果在componentDidMount()中通过调用axios来获取数据。由于axios是异步执行的，axios还未从接口取回来数据，echarts已经初始化完毕了，这时由于this.state.obj还未通过axios调用的接口数据赋值。此时echarts会渲染出一个无数据的条形图。即使在componentWillMount()中调用axios，仍然会导致该情况发生。
class Bar extends Component {
constructor(props){
super(props);
this.state={
obj: {
week: [],
data: [],
}
};
}
componentDidMount() {
// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById('bar'));
// 绘制图表
myChart.setOption({
title: { text: '每周平均交易量' },
tooltip: {},
xAxis: {
data: this.state.obj.week,
},
yAxis: {},
series: [{
name: '销量',
type: 'bar',
color: ['#dd6b66','#759aa0','#e69d87','#8dc1a9','#ea7e53','#eedd78','#73a373'],
data: this.state.obj.data,
}]
});
})
render() {
console.log(this.state.obj);
return (
);
}
}
一种正确的做法是通过promise链，必须执行完axios的调用，才能执行echarts的数据初始化设置。核心代码如下，其余部分见上一个代码。
componentDidMount() {
// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById('bar'));
// 绘制图表
axios.ajax({
url: '/charts',
}).then((res) => {
let weeks = res.result.list.map((item) =>{
return item.week;
});
let datas = res.result.list.map((item) => {
return item.data;
})
this.setState({
obj: {
week: weeks,
data: datas,
}
});
}).then(() => {
myChart.setOption({
title: { text: '每周平均交易量' },
tooltip: {},
xAxis: {
data: this.state.obj.week,
},
yAxis: {},
series: [{
name: '销量',
type: 'bar',
color: ['#dd6b66','#759aa0','#e69d87','#8dc1a9','#ea7e53','#eedd78','#73a373'],
data: this.state.obj.data,
}]
});
})
}

同步：

1.自己注册的事件

2.setTimeout ，setTimeInteval

3. ajax 回调里
异步：

1.react本身的事件

2.在生命周期里 setState
同步：执行完 立刻就修改完成

异步：执行完 10ms 修改完成