promise async await fetch

promise

function requestData(url,) {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      if (成功) {
        resolve(success)
      } else { 
        // 失败
        reject('error')
      }
    }, 3000);
  })
}

const promise = requestData("localhost")
promise.then((res) => {
  console.log("请求成功:", res)
}, (err) => { 
   console.log("请求失败:", err)
})

promise有三个状态fulfilled(成功),pending(请求中),reject(失败)

promise 有三个方法：
1 . .then(fun) 当执行resolve时执行这个方法
2 . .catch(fun) 当执行reject时执行这个方法 ，
3 . finally 无论成功失败都会执行这个方法

---

当传入resolve不同的值的区别:

情况一：如果resolve传入一个普通的值或者对象，那么这个值会作为then回调的参数；

情况二：如果resolve中传入的是另外一个Promise，那么这个新Promise会决定原Promise的状态；

new Promise((resolve, reject) => {
  // pending -> fulfilled
  resolve(new Promise((resolve,reject)=>{
    setTimeout(()=>{resolve(111)},1000)
  }))
}).then(res => {
  console.log("res:", res) //111
}, err => {
  console.log("err:", err)
})

情况三：如果resolve中传入的是一个对象，并且这个对象有实现then方法，那么会执行该then方法，并且根据 then方法的结果来决定Promise的状态；

// 2.传入一个对象, 这个兑现有then方法
new Promise((resolve, reject) => {
  // pending -> fulfilled
  const obj = {
    then: function(resolve, reject) {
      // resolve("resolve message")
      reject("reject message")
    }
  }
  resolve(obj)
}).then(res => {
  console.log("res:", res)
}, err => {
  console.log("err:", err)//reject message
})

---

Promise类方法

1.Promise.resolve
用法相当于new Promise，并且执行resolve操作

// 1.普通的值
 const promise = Promise.resolve({ name: "why" })
// 相当于
 const promise2 = new Promise((resolve, reject) => {
   resolve({ name: "why" })
 })

Promise.reject
用法相当于new Promise，只是会调用reject：

const promise = Promise.reject("rejected message")
//相当于
const promise2 = new Promsie((resolve, reject) => {
  reject("rejected message")
})

Promise.all

// 创建多个Promise
const p1 = new Promise((resolve, reject) => {
  setTimeout(() => {
    resolve(11111)
  }, 1000);
})

const p2 = new Promise((resolve, reject) => {
  setTimeout(() => {
    reject(22222)
  }, 2000);
})

const p3 = new Promise((resolve, reject) => {
  setTimeout(() => {
    resolve(33333)
  }, 3000);
})

// 需求: 所有的Promise都变成fulfilled时, 再拿到结果
// 意外: 在拿到所有结果之前, 有一个promise变成了rejected, 那么整个promise是rejected
Promise.all([p2, p1, p3, "aaaa"]).then(res => {
  console.log(res)
}).catch(err => {
  console.log("err:", err)
})

Promise.race

如果有一个Promise有了结果，我们就希望决定最终新Promise的状态，那么可以使用race方法

摘抄自：https://juejin.cn/post/7174417357417218055#heading-7

async await

1.async await 是generator（迭代器）的语法糖

2.async关键字是把一个函数变成异步函数也就是一个promise对象，然后在这个函数里面可以使用await关键字 await后面可以写一异步操作的代码，这样在这个函数中就会等await关键字后面的异步代码执行完了再往下执行

3.如果await后面的异步操作出错，那么等同于async函数返回的 Promise 对象被reject。防止出错的方法，也是将其放在try…catch代码块之中。

---

fetch

Fetch会返回Promise，所以在获取资源后，可以使用.then方法做你想做的。

const response = await fetch(url, {
  method: 'POST',
  headers: {
    "Content-type": "application/x-www-form-urlencoded; charset=UTF-8",
  },
  body: 'foo=bar&lorem=ipsum',
});

  .then(response => {consolve.log(response.json())})

• fetch 响应的结果是一个 Promise 对象

• 只要 fetch 的请求有响应，fetch() 返回的 Promise 状态都会标记为 resolve，即使响应的状态码不是 200 （404、502 其他）。只有 fetch() 无响应的时候返回的 Promise 状态才为 reject （一般网络问题或请求被拦截才会出现）。

• 当 fetch() 响应的 http 状态码不在 200 ~ 299 范围内时，fetch() 响应对象的 ok 值 为 false

async function getData() {
	const response = await fetch(url);
	if (!response.ok) {
	//创造一个错误类型
		throw new Error("");
	}
	const data = await response.json();
}

• fetch没有请求拦截
• fetch取消请求

const controller = new AbortController();
const options = {
  method: 'POST',
  signal: controller.signal,
  
};  
fetch('https://foo-bar.com', options);

// 取消请求
controller.abort()

• fetch超时处理 麻烦！