promise的理解及使用、async的使用

1，promise是什么？

是异步编程的一种解决方案，它比传统的回调函数加事件更加合理和强大。

除了使用他的异步操作外，还使用promise在项目中解决了回调地狱等问题。

promise也是一个构造函数。可以帮我们把异步操作队列化，按照顺序执行返回结果。自身上有all、reject、resolve这几个方法，原型上有then、catch等方法。

就是将将异步操作以同步操作的流程表达出来，避免了层层嵌套的回调函数。
但是使用实例化promise就会立即执行。promise可以将异步操作以同步操作的流程表达出来，避免了层层嵌套的回调函数

2，promise的状态

Promise对象代表一个异步操作，对象的状态不受外界影响，

1. pending：初始状态，没有成功或失败（进行中），
2. fulfilled：操作结束并且完成（已完成）
3. rejected：操作失败

只有异步操作的结果，可以决定是哪一种状态，任何其他的操作都无法改变这个状态，
一旦状态改变，就不会再变，任何时候都可以得到这个结果，promise的状态改变只有两种可能，要么是成功，要么失败。

除了3个状态外，函数中有两个参数：resolve与reject

分别代表了promise执行成功或失败后可以执行的回调函数。

1. resolve 作用是，将 Promise 对象的状态从“未完成”变为“成功”，在成功时调用，将异步操作的结果，作为参数传递出去。

2. reject 作用是，将 Promise 对象的状态从“未完成”变为“失败”，在失败时调用，将异步操作报出的错误，作为参数传递出去。

   就是通过resolve将成功的结果返回出去，在then()里面接收成功返回的结果。
   如果失败，可以通过reject将错误的信息也返回出去，通过catch() 可以接受失败的结果。
   

3，promise怎么使用？

使用new方法实例化对象来使用，下面是一个小例子：

let pro= new Promise(function(resolve,reject){
	let num = parseInt(Math.random()*10)
    console.log(num);
    if(num >5){
    	resolve('成功了')
    }else{
        reject('失败了')
    }   
})

pro.then(res=>{
	console.log(res);
}).catch(err=>{
	console.log(err);
})

一般使用promise来对api接口进行封装，以及一些异步的操作，都会使用到promise。
比如封装vue框架中经常使用的axios：

import axios from "axios"
//引入使用的axios

//创建实例
const http = axios.create({
    baseURL: "/api/app",	//基本地址
    timeout: 10000,			//超时时间，如果超过一定时间自动断开链接。
})

//请求拦截拦截器
http.interceptors.request.use(
    (config) => {
        config.headers = {
            deviceType: "H5"
        }
        return config
    },
    (err) => {
        Promise.reject(err)
    }
)
//响应拦截器
http.interceptors.response.use(
    (res) => {
        return res
    },
    (err) => {
        Promise.reject(err)
    }
)

export default http

在组件中导入：

import http from "./http"
export const getBanner = () => http.get("/banner")
//导出getBanner方法

4，async与await的使用

async与await是ES6标准中新增的关键字，作为处理异步请求的一种解决方案，是对promise的一个完善。是generator一个语法糖 极大的缩减了generator的复杂度 我们建议使用async。

const makeRequest = async () => {
  console.log(await getJSON())
  return "done"
}

makeRequest()
//函数前面多了一个aync关键字,await关键字只能用在aync定义的函数内
//async函数会隐式地返回一个promise，该promise的reosolve值就是函数return的值

async 和 await 是一种同步的写法，但还是异步的操作,必须同时去写才会生效

async函数会隐式地返回一个promise该promise的reosolve值就是函数return的值。

​ (示例中reosolve值就是字符串”done”)

await在数据，await 接收的对象必须还是个 promise 对象

var b = 1
async function a() {
	var c = await fn1()
    c = await fn2()
    console.log(c)
}
a()

function fn1() {
	return new Promise((resolve, reject) => {
    	setTimeout(() => {
        	b = 2
        	resolve(b)
     	}, 2000)
    })
}

function fn2() {
    return new Promise((resolve, reject) => {
         setTimeout(() => {
              b = 3
              resolve(b)
         }, 1000)
     })
}

优点：

​ 1，使用async函数可以让代码更简洁，不用像Promise需要then，,
​ 2，不需要另写函数处理Promise的resolve值，避免了代码的嵌套

Async—声明一个异步函数(async function someName(){…})自动将常规函数转换成Promise，返回值也是一个Promise对象。

只有async函数内部的异步操作执行完，才会执行then方法指定的回调函数异步函数内部可以使用await。

Await—暂停异步的功能执行(var result = await someAsyncCall()放置在Promise调用之前，await强制其他代码等待，直到Promise完成并返回结果。

注意：await只能与Promise一起使用，不适用与回调，只能在async函数内部使用