promise的概念

构造函数

构造函数就是一个函数，构造函数就是一个构造器

定义

构造函数就是一个构造对象类型的特殊函数

构造函数

function Ren(){	//定义构造函数
    this.eyes = 2
    this.skin = 'yellow'
    this.ear = 2
    this.hand = 2
    this.foot = 2
   
}
//方法定义在构造函数的原型对象身上
Ren.prototype.walk = function(){
        console.log('I can walk')
    }
Ren.prototype.tuDou = function(){
    console.log('买土豆')
}
const xiaoming = new Ren()
const xiaoli = new Ren()

小明是一个对象，小明有属性和方法

小丽是一个对象，小丽有属性和方法

replace

蕊破类似 代替,替换 re:是英语的一个前缀，表示“重复” place：位置，地点

String.prototype.replace()

定义：

使用指定字符串替换匹配字符串。 语法：

string.replace(匹配到的字符.新字符)
string.replace(匹配到的正则，新字符)

返回值：

返回替换后的新字符串，原始字符串不可以修改

面向对象编程(oop)

orient object programing

面向对象过程

• 第一步：找对象
• 第二步：把做什么，作为方法绑定到对象身上
• 最后:实现目标

单词

• price：婆rai斯 意思：价格
• color：颜色
• Brand：不r按德 意思：品牌
• info：infor 意思：信息
• IT： information technology 信息技术

js是什么？

js是一门单线程，非阻塞，异步，并发的语言

• 单线程：一个时间点只能执行一条指令
• 非阻塞：让耗时的指令出栈，由浏览器处理
• 异步机制

同步js	异步js
指令按照程序中给定顺序执行	指令可以并行执行
阻塞：下⼀个指令都必须等待上⼀个指令完成再执⾏	非阻塞：下⼀个指令可以在上⼀个指令执⾏的同时执⾏
⼤多时候，js都作为同步执⾏	在执⾏某些特定的耗时指令时才发⽣异步
指代码的执行顺序	指浏览器解决js中耗时阻塞问题的一种方法

js有什么？

调用栈,事件循环,回调队列,一些api

js阻塞是什么？

阻塞就是指运行过程中很慢

浏览器解析机制构成

• 调用栈
• webAPI
• 回调队列
• 事件循环

http通信包括了那两个部分

• http请求
• http响应

HTTP请求的状态码

Xhr.redyState:存储的xhr对象生命周期状态

Xhr.status:存储的是HTTP协议的状态码

• 200：请求成功
• 300：请求跳转
• 400：请求失败
  • 403：被禁止
  • 404：可以访问但是没有找到访问的文件

xhr.statusText:存储的是HTTP协议的状态码⽂字描述

200 : 'ok'

403：'forbidden'

404: 'Page not found.'

请求事件

• 0：open()为调用
• 1：open已经调用
• 2：服务器收到请求
• 3：处理中
• 4：处理成功

请求的监听事件

• readystate:当你希望捕捉情趣对象的不同状态,那么使用readystate
• load：当你希望捕捉HTTP请求，那么就使用load
• readystate && load：捕捉两种状态

请求错误时

const url = 'https://jsonplaceholder.typicode.com/todos'
const xhr = new XMLHttpRequest()
xhr.addEventListener('load', () => {
if(xhr.readyState === 4 && xhr.status === 200){
console.log(JSON.parse(xhr.response));
 } else {
// console.log('请求错误');
if(xhr.status === 404){
console.log('请求资源没找到');
 }
// console.log(xhr.status,xhr.statusText);
 }
})
xhr.open('GET', url)
xhr.send()

示例：http请求

function getData(api,callback){
    const url = api
    const xhr = new XMLHttpRequest()
    xhr.addEventListener('load', () => {
        if(xhr.readyState === 4 && xhr.status === 200){
            console.log(JSON.parse(xhr.resphonse))
            callback && callback(data1,undefined)
        }else{
            callback && callback(undefined,xhr.status)
        }
    })
    xhr.open('GET',url)
    xhr.send()
}
getData('地址',function(cu))

promise

定义

promise表示一个异步操作的最终结果

promise是什么

• promise()是一个构造函数,使用new promise()返回一个promise()实例对象

• promise是Es6引入的一个内置对象

• promise的用途：用来处理异步操作,解决之前回调地狱的问题

语法

new promise(executor)

new Promise((resolve,reject)=>{//resolve:解决,reject：拒绝
    
})

executor（执行器函数）

• 是一个执行器的函数
• 当new Promise(executor)实例对象时,执行器函数自动被调用
• 在执行器函数内部：存储着一个异步操作(意思：需要你自定义一个异步操作)
• resolve()当异步操作成功时执行
• reject()当异步操作失败时执行

返回值

返回一个Promise对象，promise对象内部有两个属性：

• state(状态)
  • pending:默认值。表示异步操作的结果悬而未决
  • fulfilled:解决成功,当resolve()被调用
  • rejected:失败,当reject()函数被调用
• result(结果)
  • undefined:默认
  • value：当resolve(value)被调用时输出异步操作成功的信息
  • Error：当reject(error)被调用时

promise是什么

• promise表示一个异步操作的结果
  • promise解决什么问题
  • promise设计意图：为了解决异步操作的回调地域。
• promise怎么解决的？
  • 思路：分离异步操作和回调函数
  • 具体实现：通过Promise构造函数

promise怎么解决

通过Promise构造函数分离异步操作和回调函数

Promise的具体实现步骤

第一阶段：处理异步 第一步：实例化一个promise对象 第二步：在Promise构造函数的参数中传入异步操作 第三步：在异步操作成功时修改promise状态(使用resolve修改) 第四步：在异步操作失败时修改promise状态(使用reject修改) 第五步：为promise绑定回调(promise.then())

promise对象的两个内部属性

• state：表示promise对象的状态
  • pending：默认值(悬而不决)。说明resolve或reject未调用
  • fulfilled：异步操作成功。说明resolve被调用
  • Rejected：异步操作失败。说明reject已调用
• value：表示异步操作的结果值
  • 把成功的value值绑定到promise对象
  • 把失败的错误绑定到promise对象
  • 如何使用回调函数获取异步操作结果

Promise.prototype.then()

定义 用于为promise对象绑定回调函数

promise在异步操作的角色：中间人，连接异步操作和回调函数,换言之：

promise左手是executor执行器函数

promise右手是then方法

语法

promise.then(fulfilled,rejected)//基本语法
//扩展语法
promise.then(function(){})
       .then(function(){})

• fulfilled：异步操作成功时的回调函数
• rejected：异步操作失败时的回调函数

返回值

then方法返回一个promise

用法：

1.then方法什么时候调用？

只有当promise状态改变时才会调用

2.默返回一个没有状态的promise

3.如果手动设置一个值：return 那么这个值作为promise的新值

4.如何手动return了一个promisereturn promise，那么这个promise作为返回值的promise

asyns

定义：

async 关键字⽤于创建⼀个promise异步函数

语法：

async function fn(){}

await

定义：

await关键字用于计算(等待)一个异步操作的结果值

语法：

let value = await promise

fetch API

定义：

• fetch()是一个webAPI
• fetch()是一个基于promise发起HTTP请求的新API
• fatch()是一个全局方法

fatch()基于promise发起http请求

语法：

fetch(url)
fetch(url,options)

• opstions:传入一个选项对象，设置请求细节

返回值：

返回⼀个promise

示例：获取数据的⽅法2: async和await获取数据

async function getData(url) {
let request = fetch(url)
 .then(response => response.json())
console.log(await request)}
getData('https://jsonplaceholder.typicode.com/todos')

示例2：获取数据的⽅法1：then()⽅法的链式调⽤获取数据

const url = 'https://jsonplaceholder.typicode.com/todos'
let request = fetch(url)
 .then(response => response.json())
 .then(data => console.log(data))

API地址

//key:
//api地址：
https://api.unsplash.com/photos/?client_id=IDDohJIasr5C_tJ5Eo07Qi26K7HNyQa_9oztzOl34TM
//替换your-access-key
https://api.unsplash.com/photos/?client_id=IDDohJIasr5C_tJ5Eo07Qi26K7HNyQa_9oztzOl34TM
//获取一张随机图片 : GET/photos/random
https://api.unsplash.com/photos/random?client_id=IDDohJIasr5C_tJ5Eo07Qi26K7HNyQa_9oztzOl34TM
//获取10张随机图片:   GET/photos/random?count=10
https://api.unsplash.com/photos/random?count=10&client_id=IDDohJIasr5C_tJ5Eo07Qi26K7HNyQa_9oztzOl34TM