详解Promise的 用法(含ES7)

一、Promise 的基本语法

<script>
        // 基本语法
        new Promise((resolve, reject) => {
            // resolve reject本身也是函数 ，如果我们是一个成功的操作（异步操作） 就调用 resolve, 
            // 否则就是一个失败的操作（异步操作） 就调用reject
            if (true) {
                resolve("成功的数据")
            } else {
                reject("失败的数据")
            }
        }).then(res => {
            console.log(res)
        }).catch(err => {
            console.log(err)
        })


    </script>

二、实际应用，通过promise解决回调地狱

 <script>

        // 回调地狱
        // $.get('http://127.0.0.1:5000/api/getid', function (data) {
        //     var id = data.id;
        //     $.get('http://127.0.0.1:5000/api/getcode?id=' + id, function (data) {
        //         let pwd = data.pwd;
        //         $.get('http://127.0.0.1:5000/api/getmsg?pwd=' + pwd, function (data) {
        //             if (data.code === 200) {
        //                 console.log(data.msg)
        //             }
        //         })
        //     })
        // })

        new Promise((resove, reject) => {
            $.get('http://127.0.0.1:5000/api/getid', function (data) {
                resove(data.id)
            })
        })
            .then(id => {
                return new Promise((resolve, reject) => {
                    $.get('http://127.0.0.1:5000/api/getcode?id=' + id, function (data) {
                        resolve(data.pwd)
                    })
                })
            })
            .then(pwd => {
                return new Promise((resolve, reject) => {
                    $.get('http://127.0.0.1:5000/api/getmsg?pwd=' + pwd, function (data) {
                        resolve(data.msg)
                    })
                })
            })
            .then(msg => {
                console.log(msg)
            })

    </script>

三、用ES7语法优化

<template>
  <div>
    <h1>axios的基本使用</h1>
    <button @click="sendGet">发送get请求</button>
    <button @click="sendPost">发送post请求</button>
    <button @click="submitForm">登录</button>
  </div>
</template>

<script>
// 引入axios
import axios from "axios";
// 引入qs
import qs from "qs";

// 引入调用接口的函数
import { checkLogin } from "@/api/login";

export default {
  created() {},
  methods: {
    sendGet() {
      // 发送get请求方式1
      //   axios
      //     .get("http://127.0.0.1:5000/api/register", {
      //       params: {
      //         acc: "admin",
      //         pwd: "123456"
      //       }
      //     })
      //     .then(res => {
      //       console.log(res.data);
      //     })
      //     .catch(err => {
      //       console.log(err);
      //     });
      // 发送get请求方式2
      //   axios
      //     .get("http://127.0.0.1:5000/api/register?acc=admin&pwd=123456")
      //     .then(res => {
      //       console.log(res.data);
      //     })
      //     .catch(err => {
      //       console.log(err);
      //     });
    },
    sendPost() {
      // 发送post请求
      // let params = {
      //   acc: "admin",
      //   pwd: "123"
      // };
      // axios
      //   .post("http://127.0.0.1:5000/api/login", qs.stringify(params))
      //   .then(res => {
      //     console.log(res.data);
      //   })
      //   .catch(err => {
      //     console.log(err);
      //   });
    },
    async submitForm() {
      // 登录请求
      // pomise写法
      // checkLogin({ acc: "admin", pwd: "123" })
      //   .then(({ code, msg }) => {
      //     console.log(code);
      //     console.log(msg);
      //   })
      //   .catch(err => {
      //     console.log(err);
      //   });
      let { code, msg } = await checkLogin({ acc: "admin", pwd: "123" }); // 如果不是接promise
      console.log(code, msg);
    }
  }
};
</script>

<style lang="scss" scoped>
</style>