码迷,mamicode.com
首页 > 其他好文 > 详细

promise(二)

时间:2020-03-03 22:28:56      阅读:63      评论:0      收藏:0      [点我收藏+]

标签: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)})

  

promise(二)

标签:mis   需要   data   写法   比较   对象   nbsp   调用   接收   

原文地址:https://www.cnblogs.com/edwardwzw/p/12392336.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!