实习项目中的知识点和经验总结（三）：异步操作：Promise 以及基于promise的axios；Async await

JS【需要红宝书<- ->实践 反复学习】

1. 事件冒泡 事件捕获
2. Promise 以及基于promise的axios
   –>接口数据调用的同步异步问题以及在不同生命周期中的情况
3. 理解和使用事件绑定
   bind及bind、call、apply 改变函数中this的指向

Promise 对象是由关键字 new 及其构造函数来创建的。

如何创建一个 Promise：

const promise = new Promise((resolve, reject) => {
    // do something here ...
    if (success) {
        resolve(value); // fulfilled
    } else {
        reject(error); // rejected
    }
});

通过then方法，分别指定resolved状态和rejected状态的回调函数：

  promise.then(function(value) {
      // success
  }, function(error) {
      // failure
  });

创造promise实例后，它会立即执行。

promise封装axios

const params = {
            	method: 'post',
            	data: {
            	}
            }
function axios (url,params){
	return new Promise((resolve,reject)=>{
		axios.get(url,params).then(function(response){
			resolve(response.data)
		})
		.catch(function(err){
			reject(err)
		})
	})
}
axios(url,params).then(function(data){
	console.log(data)
})
.catch(function(){
})

async

ES2017 标准引入了 async 函数，使得异步操作变得更加方便

async函数返回的 Promise 对象，当函数执行的时候，一旦遇到await就会先返回。
必须等到内部所有await命令后面的异步操作 Promise 对象执行完，才会发生状态改变，除非遇到return语句或者抛出错误。也就是说，只有async函数内部的异步操作执行完，才会执行then方法指定的回调函数。

async function f() {
  try {
    await Promise.reject('出错了');
  } catch(e) {
  }
  return await Promise.resolve('hello world');
}

f()
.then(v => console.log(v))
// hello world