Promise对象也称链式调用,如果有一组数据需要先查询到另一组数据,然后通过这组数据再获取最终想要的数据。
例如封装axios
创建一个ajaxUtil.js
文件
import axios from 'axios'/* html页面,则在引入ajaxUtil.js前通过<script>引入axios <script src="https://unpkg.com/axios/dist/axios.min.js"></script> */function ajax (url, data={}, type='GET') { return new Promise(function (resolve, reject) { // 执行异步ajax请求 let promise; if (type === 'GET') { // 准备url query参数数据 let dataStr = ''; //数据拼接字符串 Object.keys(data).forEach(key => { dataStr += key + '=' + data[key] + '&' }); if (dataStr !== '') { dataStr = dataStr.substring(0, dataStr.lastIndexOf('&')); url = url + '?' + dataStr } // 发送get请求 promise = axios.get(url) } else { // 发送post请求 promise = axios.post(url, data) } promise.then(function (response) { // 成功了调用resolve() resolve(response.data) }).catch(function (error) { //失败了调用reject() reject(error) }) })}12345678910111213141516171819202122232425262728293031323334353637
在需要使用ajax发送请求的地方引入ajaxUtil.js
html页面通过script
引入,例如<script src="js/ajaxUtils.js"></script>
然后就可以通过
async myMthod1(){ let result=await ajax('请求的url','要传的参数对象','默认GET请求');}123
通过await ajax(url,{},'GET/POST')
方式获取promise对象中的数据,使用await
的方法需要在方法上加上async
声明。
如果不使用await则会将promise对象返回过来,得到的数据类似与下面的截图
正确的想要的数据格式应该是这样的(也就是直接将响应回来的数据获得到)
引用:MDN文档关于Promise对象的说明
Promise对象有三种状态
状态 | 解释 |
---|---|
pending | 初始状态,既不是成功,也不是失败状态。 |
fulfilled | 意味着操作成功完成。 |
rejected | 意味着操作失败。 |
Promise.resolve(value)
返回一个成功时的Promise(通过value
将数据传递)
Promise.reject(reason)
返回失败的Promise对象(通过reason
将失败返回的数据传递)
Promise.all(iterable)
获得promise对象的链式调用返回的所有的成功和失败的数据,需要讲链式调用的promise对象替代这里的iterable
。
链式调用的过程中,成功则将成功的数据通过Promise.resolve(value)
方法传给下一个Promise
对象
如果其中有一个请求失败了,则将失败返回的数据通过Promise.reject(reason)
传递给下一个Promise对象。
这样的链式调用中Promise对象中就会存下成功和失败时返回的数据,顺序按照链式调用的顺序。
Promise.allSettled(iterable)
等到所有promises都完成(每个promise返回成功或失败)。
返回一个promise,该promise在所有promise完成后完成。并带有一个对象数组,每个对象对应每个promise的结果。
Promise.any(iterable)
接收一个Promise对象的集合,当其中的一个promise完成,就返回那个已经有完成的promise的值。
Promise.race(iterable)
当iterable参数里的任意一个子promise被成功或失败后,父promise马上也会用子promise的成功返回值或失败详情作为参数调用父promise绑定的相应句柄,并返回该promise对象。
作者:诗水人间
链接:https://blog.csdn.net/qq_41813208/article/details/107352082
来源:CSDN
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。