模块 & promise

一、模块（导入与导出）

1、export

• （1）导出
  • 可以导出多个命名模块
  • 导出时同时要声明

        export const getList = () => {
            console.log('getList');
            return 'getList'
        }
        export const login = () => {
            console.log('login');
            return 'login'
        }
        export const getDetail = () => {
            console.log('getDetail');
            return 'getDetail'
        }

• （2）导入
  • 通过解构导入模块，名称要一一对应
  • 或者使用 * 导入全部的模块，用变量装起来

        1、解构导入对应的模块,名称要一一对应
        import { getList, login, getDetail } from './export'

        2、或者使用*导入全部的命名模块,用obj装起来
        import * as obj from './export'

2、export default

• （1）导出
  • 只能导出一个默认模块，这个模块可以匿名
  • 可以先声明后导出
  • 也可以直接导出

       导出默认模块，可以先声明后导出
        const obj = {
            username: '小白',
            age: 123
        }
        export default obj;

• （2）导入
  • 导入时可以随意命名

        import aaa from './export'

3、总结

（1）导入默认模块和命名模块可以混合使用，但是默认模块一定要在前面

       导入默认模块和命名模块可以混合使用，但是默认模块一定要在前面,默认模块可以随意命名
        import aaa, { getList, login, getDetail } from './export'

二、promise（属于数据存储的方式）

1、promise是什么？

      Promise是异步编程的一种解决方案，可以帮异步编程变同步，避免回调地狱

• 回调地狱

<script>
    let url1 = 'xxx';
    let url2 = 'xxx';
    let url3 = 'xxx';
    axios.get(url1).then(res => {
        // 第二个请求依赖第一个请求的数据,在这里发送第二个请求
        console.log('todo');
        console.log('todo');
        console.log('todo');
        console.log('todo');
        console.log('todo');
        axios.get(url2).then(res => {
            console.log('todo');
            console.log('todo');
            console.log('todo');
            console.log('todo');
            console.log('todo');
            // 第三个请求依赖第二个请求的数据,在这里发送第三个请求
            axios.get(url3).then(res => {
                console.log('todo');
                console.log('todo');
                console.log('todo');
                console.log('todo');
                console.log('todo');

            }).catch(err => {
                console.log(err);
            })
        }).catch(err => {
            console.log(err);
        })
    }).catch(err => {
        console.log(err);
    })
</script>

2、特点

（1）promise可以获取异步操作的信息

（2）promise有三种状态：

• pending：等待状态
• fulfiled：成功状态
• rejected：失败状态

3、用途

（1）在项目中用来封装请求，返回一个promise对象

（2）调用的时候使用async await时，代码变得更容易阅读和维护

4、promise例子

（1）创建一个Promise对象，参数是一个函数，函数接收两个参数（resolve：处理成功的情况，reject：处理失败的情况）（存）

     创建一个Promse的对象
     参数是一个函数
     函数接收两个参数,resolve-处理成功的情况,reject-处理失败的情况

    let data = {
        code: '666',
        msg: 'ok'
    }
    let obj = new Promise((resolve, reject) => {
        // 成功的情况
        if (data.code === '666') {
            // 使用resolve把数据存放起来,存的是成功的信息
            resolve(data);
        } else {
            // 使用reject把数据存放起来,存的是失败的信息
            reject('获取数据失败');
        }
    });

（2）第一种：then().catch()（取）

     以上是存数据,以下是取数据
    obj.then(res => {
        console.log(res);
    }).catch(err => {
        console.log(err);
    })

（3）第二种：async await（另一种获取数据的方式）

    let obj = new Promise((resolve, reject) => {
        let url = 'http://132.232.87.95:3000/api/city/getList';
        axios.get(url).then(res => {
            if (res.data.code === '666') {
                resolve(res.data);
            } else {
                // 错误信息
                reject(res.data.msg);
            }
        }).catch(err => {
            reject('网络异常,请稍后再试');
        })
    });

    async function getList() {
        加上async后,对于promse对象,可以使用await等待异步请求的结果(异步->同步)
        const res = await obj;
        console.log(res);
    }

    getList();

（4）try{ } catch(err) { }：捕获异常，try：尝试运行括号内的代码，catch：运行失败将错误输出，不影响下面的代码执行

    try {
        console.log(a);
    } catch (e) {
        console.log('e', e);
    }
    console.log(222);

（5）把请求封装成一个函数，同一处理成功和失败的情况

    //需要两个参数，data非必须
    let $ajax = (url, data) => {
        //让data默认为空对象
        data = data || {};

        //创建一个promise对象,参数是个函数
        let obj = new Promise((resolve, reject) => {
            //请求数据
            axios.get(url, data).then(res => {
                if (res.data.code === '666') {
                    resolve(res);
                } else {
                    alert(res.data.msg);
                }
            }).catch(err => {
                alert('网络异常，请稍后再试')
            })
        })
        return obj;
    }

    let getList = async () => {
        let url = 'http://huruqing.cn:3000/api/film/getList';
        let res = await $ajax(url);
        console.log(res.data)
    }
    getList();