# Promise

**Repository Path**: Gnius/promise

## Basic Information

- **Project Name**: Promise
- **Description**: 在驻马店市净睿公司练习的 promise基础
- **Primary Language**: JavaScript
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2020-11-24
- **Last Updated**: 2020-12-19

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

异步效果分析：<font color=blue size=3>1.定时任务 2.Ajax 3.事件对象</font>

多次异步调用可能存在的问题 调用的顺序不确定,如果要确保调用的顺序一致 需要嵌套调用

Promise 是异步编程的解决方案，从语法上将，Promise是一个对象，从它可以获取异步操作的消息。

使用 Promise主要有以下好处：

可以避免多层异步调用嵌套问题(回调地狱)
Promise 对象提供了简洁的API, 使得控制异步操作更加容易

### Promise实例方法
![avator](./img/1605065933(1).jpg)

### Promise对象方法
![avator](./img/1605075800(1).jpg)

fetch

fetch是更加简单的数据获取方式，功能更加强大，更灵活，可以看做是 xhr原生 Ajax对象的升级版。基于Promise实现

### fetchAPI 的基本用法
![fetch](./img/fetch001.jpg)

### fetchAPI 请求参数
![fetch](./img/fetch002.jpg)

### fetchAPI 中GET请求方式的参数传递
![fetch](./img/fetch_get.jpg)

### fetchAPI 中DELETE请求方式的参数传递
![fetch](./img/fetch_delete.jpg)

### fetchAPI 中POST请求方式的参数传递（一）
![fetch](./img/fetch_post.jpg)

### fetchAPI 中POST请求方式的参数传递（二）
![fetch](./img/fetch_post2.jpg)

### fetchAPI 中PUT请求方式的参数传递
![fetch](./img/fetch_put.jpg)

### fetchAPI 的响应结果-响应数据格式
![fetch](./img/fetch_result.jpg)


说明：fetchAPI中两种post请求传递的参数不一样，但是请求的接口未发送变化。

传统的url通过?传递 如果是Restful通过 /传递

fetch API文档 [点击](https://developer.mozilla.org/zh-CN/docs/Web/API/Fetch_API)

### Axios

Axios 是一个基于 promise 的 HTTP 库，可以用在浏览器和 node.js 中。拥有以下特性：

*   支持浏览器和 node.js
*   支持promise
*   能拦截请求和响应
*   自动转换 JSON数据

axios的post传递参数 默认传递的是 json格式的数据

axios响应结果的主要属性

*   data        实际响应回来的数据
*   headers     响应头信息
*   status      响应状态码
*   statusText  响应状态信息

axios全局配置
```
axios.defaults.timeout = 10000;   // 超时时间
axios.defaults.baseURL = 'apiURL';  // 默认地址
axios.defaults.headers['mytoken'] = 'Bearer  123547890453490'   //设置请求头
```
#### Axios拦截器 

分为请求拦截器和响应拦截器两种

1.通过请求拦截器-控制所有的请求    

#### 接口调用-async/await的基本用法
![async&await](./img/async-await.jpg)

#### 接口调用-async/await处理多个异步请求
![async&await](./img/async_await处理多个请求.jpg)

[axios中文网](http://www.axios-js.com)   B站地址：BV1LE411T78Z