emmm 还是选择了贴吧，感觉现在贴吧氛围还是好的 这个直接复制的我的blog 用的makedown语法 懒得改了 不知道能不能放地址 就先不放了 我现在也还是小白状态 有问题直接留言就好 也作为相互学习一下
## 关于此教程
想写写关于promise的东西，从浅往深写一下，借此来了解一下JavaScript的全部。emmm
主要就是先从实用角度出发，开始先是基础使用，然后慢慢拓展深入。
## 简介
>Promise 对象用于表示一个异步操作的最终完成 (或失败), 及其结果值.引用自[mdn](https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Promise)
这句话描述了promise的基本特征。
promimse的出现是为了方便前端的异步操作，因为之前，前端所有的接口请求与浏览器事件都是通过回调函数进行操作的，尤其是对于接口请求，因为接口请求完成之后要做的事情非常对，更新页面信息，提示，如果这个接口需要其他接口信息，请求完成之后还需要回调函数再次请求，然后又出现一个回调函数，回调函数如果多起来，代码可读性就开始下降。
## 创建及使用
#### 基础创建使用
如何使用呢？因为是一个对象，所以需要实例化一下:`new Promise(function)` 注意首字母是大写的(构造函数)
promise接受一个参数，类型为function，将在实例化之后执行，这个函数又有两个参数，是由实例化时给与的，第一个是将promise状态改变为成功(fulfilled)并返回值，另一个是把promise状态改变为失败(rejected)并返回值
举例如下
```
//使用的是jquery的ajax方法
let ajax = new Promise((res,rej)=>{
$.ajax({
url:"https://luyuan.tk/api/popArticles",
success(data){
res(data)
},
error(error){
rej(error)
}
})
})
//使用.then方法获取成功后返回值，使用.catch方法获取失败后的返回值
ajax.then((res)=>{
console.log(res)//打印成功信息
}).catch((err)=>{
console.log(err)//打印失败信息
})
```
这就是promise的基本用法，使用promise调用[https://luyuan.tk/api/popArticles](https://luyuan.tk/api/popArticles)接口，然后打印返回信息。
这样写的时候，代码就已经分清楚了
```
ajax.then((res)=>{
console.log(res)//打印失败信息
}).catch((err)=>{
console.log(err)//打印成功信息
})
```
这一部分是完成之后的动作
```
let ajax = new Promise((res,rej)=>{
$.ajax({
url:"https://luyuan.tk/api/popArticles",
success(data){
res(data)
},
error(error){
rej(error)
}
})
})
```
这一部分是请求方法
虽然看起来没有差别，但是如果成功或失败需要执行更多的动作，优势就很明显了。
#### 尝试进行第一次封装
然后我们尝试一下封装一个promise的ajax
```
//只封装常用的参数
function ajax(info){
let{url,data,type,headers} = info;
return new Promise((res,rej)=>{
$.ajax({
url,
data,
type,
headers,
success(data){
res(data)
},
error(error){
rej(error)
}
})
})
}
```
然后我们使用的时候只需要通过
```
ajax({url:"https://luyuan.tk/api/popArticles"}).then((res)=>{console.log(res)})
```
这样就很方便了，如果业务域名固定的话还可以
```
function ajax(info){
let baseurl = "https://luyuan.tk/api"
let{url,data,type,headers} = info;
url = baseurl + url
return new Promise((res,rej)=>{
$.ajax({
url,
data,
type,
headers,
success(data){
res(data)
},
error(error){
rej(error)
}
})
})
}
```
使用的时候只需要通过
```
ajax({url:"/popArticles"}).then((res)=>{console.log(res)})
```
这样就会简洁许多了！
#### 链式调用
如果需要请求多个接口怎么办?还是使用上面的方法
```
ajax({url:"/popArticles"}).then((res)=>{
return ajax({
url:"/article",
data:{alias:res.data.articles[0].alias}
})
}).then((res)=>{
console.log(res)
})
```
是不是感觉很奇怪？为什么还能这么用，因为第一个执行完成之后，然后执行then回调，然后又返回下一个promise。(参考js链式调用，比如jquery)
行吧，第一次就写这么多，其实promise不止如此，如何捕获错误信息，promise的状态是什么。
下一篇再写把。
## 关于此教程
想写写关于promise的东西，从浅往深写一下，借此来了解一下JavaScript的全部。emmm
主要就是先从实用角度出发，开始先是基础使用，然后慢慢拓展深入。
## 简介
>Promise 对象用于表示一个异步操作的最终完成 (或失败), 及其结果值.引用自[mdn](https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Promise)
这句话描述了promise的基本特征。
promimse的出现是为了方便前端的异步操作，因为之前，前端所有的接口请求与浏览器事件都是通过回调函数进行操作的，尤其是对于接口请求，因为接口请求完成之后要做的事情非常对，更新页面信息，提示，如果这个接口需要其他接口信息，请求完成之后还需要回调函数再次请求，然后又出现一个回调函数，回调函数如果多起来，代码可读性就开始下降。
## 创建及使用
#### 基础创建使用
如何使用呢？因为是一个对象，所以需要实例化一下:`new Promise(function)` 注意首字母是大写的(构造函数)
promise接受一个参数，类型为function，将在实例化之后执行，这个函数又有两个参数，是由实例化时给与的，第一个是将promise状态改变为成功(fulfilled)并返回值，另一个是把promise状态改变为失败(rejected)并返回值
举例如下
```
//使用的是jquery的ajax方法
let ajax = new Promise((res,rej)=>{
$.ajax({
url:"https://luyuan.tk/api/popArticles",
success(data){
res(data)
},
error(error){
rej(error)
}
})
})
//使用.then方法获取成功后返回值，使用.catch方法获取失败后的返回值
ajax.then((res)=>{
console.log(res)//打印成功信息
}).catch((err)=>{
console.log(err)//打印失败信息
})
```
这就是promise的基本用法，使用promise调用[https://luyuan.tk/api/popArticles](https://luyuan.tk/api/popArticles)接口，然后打印返回信息。
这样写的时候，代码就已经分清楚了
```
ajax.then((res)=>{
console.log(res)//打印失败信息
}).catch((err)=>{
console.log(err)//打印成功信息
})
```
这一部分是完成之后的动作
```
let ajax = new Promise((res,rej)=>{
$.ajax({
url:"https://luyuan.tk/api/popArticles",
success(data){
res(data)
},
error(error){
rej(error)
}
})
})
```
这一部分是请求方法
虽然看起来没有差别，但是如果成功或失败需要执行更多的动作，优势就很明显了。
#### 尝试进行第一次封装
然后我们尝试一下封装一个promise的ajax
```
//只封装常用的参数
function ajax(info){
let{url,data,type,headers} = info;
return new Promise((res,rej)=>{
$.ajax({
url,
data,
type,
headers,
success(data){
res(data)
},
error(error){
rej(error)
}
})
})
}
```
然后我们使用的时候只需要通过
```
ajax({url:"https://luyuan.tk/api/popArticles"}).then((res)=>{console.log(res)})
```
这样就很方便了，如果业务域名固定的话还可以
```
function ajax(info){
let baseurl = "https://luyuan.tk/api"
let{url,data,type,headers} = info;
url = baseurl + url
return new Promise((res,rej)=>{
$.ajax({
url,
data,
type,
headers,
success(data){
res(data)
},
error(error){
rej(error)
}
})
})
}
```
使用的时候只需要通过
```
ajax({url:"/popArticles"}).then((res)=>{console.log(res)})
```
这样就会简洁许多了！
#### 链式调用
如果需要请求多个接口怎么办?还是使用上面的方法
```
ajax({url:"/popArticles"}).then((res)=>{
return ajax({
url:"/article",
data:{alias:res.data.articles[0].alias}
})
}).then((res)=>{
console.log(res)
})
```
是不是感觉很奇怪？为什么还能这么用，因为第一个执行完成之后，然后执行then回调，然后又返回下一个promise。(参考js链式调用，比如jquery)
行吧，第一次就写这么多，其实promise不止如此，如何捕获错误信息，promise的状态是什么。
下一篇再写把。
