异步

同步异步

• 同步：在同一时间段内，只能做一件事情
• 异步：在同一时间段内，可以同时做多件事情

javascript 是单线程语言，从头到尾，从左到右，有错误就停止运行。

Ajax

• 可以实现与服务器的异步通信
• 局部刷新页面

异步解决的发展

• 回调函数
• Promise（ES6）
• generator（ES6)
• async / await（ES7)：异步终极解决方案

Promise

const p = new Promise((resolve, reject) => {
	// 异步代码
	$.ajax({
		url: '/users',
		success(msg) {
			// 成功回调
			resolve(msg)
		},
	})
})
// 成功执行
p.then((msg) => {
	return new Promise((resolve, reject) => {
		$.ajax({
			url: '/users',
			data: {
				id: msg.id,
			},
		})
	}).then((msg) => {})
})
// 失败执行
p.catch(() => {})

async/await

async：用于定义一个异步函数，异步函数的返回值是 Promise 对象

async function foo() {}
foo()

await：一般用于等待一个 Promise 对象，实际上就是等待一个异步处理结果

const p = new Promise((resolve, reject) => {
	// 异步代码
	resolve({ id: 1 })
})
async function foo() {
	const msg = await p
	console.log(msg) // {id:1}
}
foo()

axios

1. 发起 get 请求：

axios.get(请求地址, { params: 参数 }).then(function (res) {})

2. 发起 post 请求：

axios.post(请求地址, { data: 参数 }).then(function (res) {})
axios.post(请求地址, 参数).then(function (res) {})

3. 综合方法：

axios({
	method: 请求类型,
	url: 请求地址,
	params: get请求发送的数据,
	data: post请求发送的数据,
})
	.then(function (res) {})
	.cache(function (error) {})

注意：res 不是服务器返回的原始数据，是 axios 加工之后的数据；res.data 是服务器返回的数据；