一、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>

總結

以上是生活随笔為你收集整理的详解Promise的 用法(含ES7)的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。