概述
async、await 是用Promise异步函数中的。
在第一次接触这两个（async、await）这两个关键词的时候，是在视频教程上看到的，第一次看到别人在用，还没什么感触，直到发现很多人在用，我就找到相关的介绍，试着用了一下，真是挺香的
在以前使用promise中通常使用then和catch的方法来接收返回成功和失败的结果，但是在ES2017中引入了两个关键字，解决了不使用then与catch也能优雅的接收结果。
首先-了解一下吧
了解一下前因后果吧！
异步编程允许我们在执行一个长时间任务时，程序不需要等待，而是继续执行之后的代码。知道这些任务完成之后才来通知你。通常是以回调函数callback的形式进行的。这种形式避免了程序的阻塞，大大提高了执行效率。
传统的回调函数(callback Function)
// 我们使用setTimeout()让一个函数在制定的时间后执行
setTimeout(() => {
console.log('你好啊，我后执行');
}, 3000);
console.log('我会先执行');
//输出结果========
//我会先执行
//你好啊，我后执行
执行多个异步操作
如果执行多个异步操作，当第一个任务执行完成之后，再回调函数中执行第二个任务，然后再执行第三个任务，这就形成了回调地狱。为了解决这个问题，promise应运而生。
setTimeout(() => {
console.log('我是第一个');
setTimeout(() => {
console.log('我是第二');
setTimeout(() => {
console.log('我是最后');
}, 3000);
}, 3000);
}, 3000);
//输出结果========
//我是第一
//我是第二
//我是最后
使用promise
在promise中fetch()就是一个很好的例子
使用fetch()请求，立马发送了一个Promise的对象。
但是想拿到promise中的结果，就要使用then,catch;当然也可以使用async和awit
我很懒，不想写了…
下面视频自己看吧！！！
我自己的使用笔记！！！
在做uniapp中请求数据的时候，看到教程老师封装api后可以随意的调用，使用起来挺方便的。下面来看下教程中老师封装的api
1、创建一个api.js文件
//请求的域名
const BASE_URL = 'https://api-hmugo-web.itheima.net'
//向外抛出一个封装的 promise 请求
export const myRequest = (options)=>{
return new Promise((resolve,reject)=>{
uni.request({
url:BASE_URL + options.url,
method: options.method || 'GET',
data: options.data || {},
success: (res)=>{
resolve(res)
},
fail: (err)=>{
uni.showToast({
title: '请求接口失败'
})
reject(err)
}
})
})
}
2、放在全局的 main.js 中引用上方api.js
// ......
import {myRequest} from "./uni_js/api.js"
Vue.prototype.$myRequest = myRequest
// ......
3、在 .vue 文件中发送请求调用
<template>
<view>
渲染数据....
</view>
</template>
<script>
export default {
data() {
return {
// 接收数据
list:[]
}
},
components:{},
onLoad() {
// 进入页面直接调用方法请求数据
this.getGoodList()
},
methods: {
// 请求方法第一种方法============使用then接收结果
getGoodList(){
this.$myRequest({
url:"/api/public/v1/goods/search"
}).then((reslut) => {
this.good_list = reslut.data.message.goods
})
},
// 第二种请求方法=========使用async、awit接收结果
async getGoodList(){
const rest = await this.$myRequest({
url:"/api/public/v1/goods/search"
})
this.list = rest.data.message.goods
console.log(rest)
console.log('我成功了')
},
}
}
</script>
<style>
/* 写样式 */
</style>
