一、Promise 的基本语法
1 <script>
2 // 基本语法
3 new Promise((resolve, reject) => {
4 // resolve reject本身也是函数 ,如果我们是一个成功的操作(异步操作) 就调用 resolve,
5 // 否则就是一个失败的操作(异步操作) 就调用reject
6 if (true) {
7 resolve("成功的数据")
8 } else {
9 reject("失败的数据")
10 }
11 }).then(res => {
12 console.log(res)
13 }).catch(err => {
14 console.log(err)
15 })
16
17
18 </script>
二、实际应用,通过promise解决回调地狱
1 <script>
2
3 // 回调地狱
4 // $.get('http://127.0.0.1:5000/api/getid', function (data) {
5 // var id = data.id;
6 // $.get('http://127.0.0.1:5000/api/getcode?id=' + id, function (data) {
7 // let pwd = data.pwd;
8 // $.get('http://127.0.0.1:5000/api/getmsg?pwd=' + pwd, function (data) {
9 // if (data.code === 200) {
10 // console.log(data.msg)
11 // }
12 // })
13 // })
14 // })
15
16 new Promise((resove, reject) => {
17 $.get('http://127.0.0.1:5000/api/getid', function (data) {
18 resove(data.id)
19 })
20 })
21 .then(id => {
22 return new Promise((resolve, reject) => {
23 $.get('http://127.0.0.1:5000/api/getcode?id=' + id, function (data) {
24 resolve(data.pwd)
25 })
26 })
27 })
28 .then(pwd => {
29 return new Promise((resolve, reject) => {
30 $.get('http://127.0.0.1:5000/api/getmsg?pwd=' + pwd, function (data) {
31 resolve(data.msg)
32 })
33 })
34 })
35 .then(msg => {
36 console.log(msg)
37 })
38
39 </script>
三、用ES7语法优化
1 <template>
2 <div>
3 <h1>axios的基本使用</h1>
4 <button @click="sendGet">发送get请求</button>
5 <button @click="sendPost">发送post请求</button>
6 <button @click="submitForm">登录</button>
7 </div>
8 </template>
9
10 <script>
11 // 引入axios
12 import axios from "axios";
13 // 引入qs
14 import qs from "qs";
15
16 // 引入调用接口的函数
17 import { checkLogin } from "@/api/login";
18
19 export default {
20 created() {},
21 methods: {
22 sendGet() {
23 // 发送get请求方式1
24 // axios
25 // .get("http://127.0.0.1:5000/api/register", {
26 // params: {
27 // acc: "admin",
28 // pwd: "123456"
29 // }
30 // })
31 // .then(res => {
32 // console.log(res.data);
33 // })
34 // .catch(err => {
35 // console.log(err);
36 // });
37 // 发送get请求方式2
38 // axios
39 // .get("http://127.0.0.1:5000/api/register?acc=admin&pwd=123456")
40 // .then(res => {
41 // console.log(res.data);
42 // })
43 // .catch(err => {
44 // console.log(err);
45 // });
46 },
47 sendPost() {
48 // 发送post请求
49 // let params = {
50 // acc: "admin",
51 // pwd: "123"
52 // };
53 // axios
54 // .post("http://127.0.0.1:5000/api/login", qs.stringify(params))
55 // .then(res => {
56 // console.log(res.data);
57 // })
58 // .catch(err => {
59 // console.log(err);
60 // });
61 },
62 async submitForm() {
63 // 登录请求
64 // pomise写法
65 // checkLogin({ acc: "admin", pwd: "123" })
66 // .then(({ code, msg }) => {
67 // console.log(code);
68 // console.log(msg);
69 // })
70 // .catch(err => {
71 // console.log(err);
72 // });
73 let { code, msg } = await checkLogin({ acc: "admin", pwd: "123" }); // 如果不是接promise
74 console.log(code, msg);
75 }
76 }
77 };
78 </script>
79
80 <style lang="scss" scoped>
81 </style>