标签:mis 需要 data 写法 比较 对象 nbsp 调用 接收
【本文测试接口根路径:https://jsonplaceholder.typicode.com】
在es6之前,我们处理异步时常常会用回调的方式,这难免会导致回调地狱。
下面再看一个关于异步回调的案例:
而promise的出现很好地解决了这个问题,接下来我们把createPost函数加以修改:
在 promise 实例中调用resolve()方法使其状态从 pending 变为 resolved, resolve()方法中传递的参数即为then()中接收到的结果。
// 写法一:直接调用Promise的resolve方法 let promise1 = Promise.resolve(‘11111‘) promise1 .then(res => console.log(res)) // 写法二:new出一个Promise对象后调用resolve方法 let promise2 = new Promise((resolve,reject) => { resolve(‘222222‘) }) promise2 .then(res => console.log(res)) .then(()=>{console.log(‘2-2‘)}) let promise3 = new Promise((resolve,reject) => { resolve(‘3‘) }) promise3 .then(res => console.log(‘33333‘)) .then(()=>{console.log(‘3-3‘)}) // 模拟异步 let promise4 = new Promise((resolve,reject) => { setTimeout(resolve,2000,‘44444‘) }) promise4 .then(res => console.log(res)) // Promise.all()中传递一个数组,当其中所有的promise都处理完毕后才返回结果 Promise.all([promise1,promise2,promise3,promise4]) .then(res => {console.log(res)})
打印结果如下:
fetch
fetch请求返回一个 promise 对象:
let resData = fetch(‘https://jsonplaceholder.typicode.com/users‘) let promise = Promise.resolve(resData).then(res => res.json()).then(data => console.log(data))
但是这样每次请求完数据都需要调用 resolve() 方法并转为 json 格式,比较麻烦,
下面我们封装 fetch 请求:
// 写法一:
class TestHttp { get(url) { return new Promise((resolve,reject) => { fetch(url) .then(res => res.json()) .then(res => resolve(res)) .catch(err => reject(new Error("报错了"))) }) } } const $http = new TestHttp() $http.get(‘https://jsonplaceholder.typicode.com/users‘) .then(res => console.log(res)) .catch(err => console.log(err)) // 写法二: class TestHttp1 { get(url) { return fetch(url) .then(res => res.json()) .then(res => console.log(res)) .catch(err => console.log(err)) } } const $http1 = new TestHttp1() var result = $http1.get(‘https://jsonplaceholder.typicode.com/users‘)
接下来我们用 async await 的方式进行封装:
class TestHttp { async get(url) { const response = await fetch(url) let flag = false if (!flag) { const resData = await response.json() return resData } else { await Promise.reject(new Error("error:报错了")) } } } const $http = new TestHttp() $http.get(‘https://jsonplaceholder.typicode.com/users‘) .then(res => console.log(res)) .catch(err => console.log(err))
async await
// 写法一: let promise = new Promise((resolve,reject) => { setTimeout(()=> { let obj = {name:‘zhangsan‘,age:22} resolve(obj) },2000) }) promise .then(res => console.log(res)) // 写法二: async function testFn() { let getData = await new Promise((resolve,reject) => { setTimeout(()=> { let obj = {name:‘zhangsan‘,age:32} resolve(obj) },2000) }); let result = await getData return result } testFn().then(res => {console.log(res)})
标签:mis 需要 data 写法 比较 对象 nbsp 调用 接收
原文地址:https://www.cnblogs.com/edwardwzw/p/12392336.html