promise处理异步问题

什么是promise

• 异步编程的解决方案，是一个构造函数 new promise();

promise 有什么用

• promise对象用于存数据和数据状态
• 回调地狱,代码难以维护
  回调地狱:(常常第一个的函数的输出是第二个函数需要的东西)
  async 函数(){ await 数据 } 注意获取到的数据前面要加await 不然会报错
• 这个promise可以解决异步的问题(把异步变同步)，本身不能说promise是异步的
• 支持多个并发的请求，获取并发请求中的数据

axios 获取后台数据的一个插件

• axios.get aixos.post 得到的也是一个promise对象
• 详细了解请查看 axios 篇

<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script>
    //  是一个构造函数 new promise();
    // 异步编程的解决方案
    // 存取(除了数据之外还可以存过程)
    var url = 'http://132.232.87.95:3000/api/film/getList';

    /**
     * 参数是一个函数
     * 函数的参数有两个
     * resolve 返回成功的信息
     * reject 返回失败的信息
     * pending 进行中
        new Promise((resolve,reject)=>{
            ()=>{
                resolve();
            }.()=>{
                reject();
            }
        })
    */

    // 将一个请求封装到了promise对象里面(存)
    var aa = new Promise((resolve,reject)=>{
        axios.get(url).then(res=>{
            // 成功
            resolve(res.data);
            // 去掉data
        }).catch(error=>{
            reject('请求失败')
        })
    }) 

    // 读取promise对象里的数据(取)
    aa.then(res=>{
        console.log(res);
    }).catch(error=>{
        console.log(error);
    })

    // 作用:可以封装请求，错误也可以处理
</script>

• 实际应用

<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script>
    // 需求：拿到第一个电影的详情
    var url = 'http://132.232.87.95:3000/api/film/getList';
    
    // promise是一个对象用来处理异步操作

    // 方法1.从成功的请求里获取Id再根据Id去获取详情...
    // 2.先通过电影列表获取Id再用Id获取电影的详情
    // 回调地狱
    // axios.get(url).then(res=>{
    //     let filmId = res.data.films[0].filmId;
    //     let url = 'http://132.232.87.95:3000/api/film/getDetail';
    //     axios.get(url,{
    //         params:{
    //             filmId
    //         }
    //     }).then(res=>{
    //         console.log(res);
    //     })
    // })

    // var getList = new Promise((resolve,reject)=>{
    //     axios.get(url).then(res=>{
    //         // 成功
    //         resolve(res.data);
    //     }).catch(error=>{
    //         reject('网络异常')
    //     })
    // })


    // async 异步
    async function getDetail(){
        // 把异步变同步
        let url1='http://132.232.87.95:3000/api/film/getList';
        let res = await axios.get(url1);
        let filmId = res.data.films[0].filmId;
        let url = 'http://132.232.87.95:3000/api/film/getDetail?filmId='+filmId;
        let res2 = await axios.get(url,{});
        console.log(res2);
    }

    /*
        async ()=>{
            let a = await 2;
            console.log(a);
            async和await都要
        }
    */

    getDetail();

</script>

封装函数方法

/* eslint-disable no-unused-vars */
import axios from 'axios';


// const get = () => {
//     console.log('get请求');
// }

// const post = () => {
//     console.log('post请求')
// }

// export{
//     get,
//     post
// }

// process.env.NODE_ENV环境
let baseURL;
if(process.env.NODE_ENV=='development'){
    baseURL = 'http://132.232.94.151:3000/api'
}else{
    baseURL = '/xxx'
}
// baseURL es6 方法


const $http = axios.create({
    baseURL,
})
// create 是axios自带的方法

export const get = (url,params)=>{
    params = params || {};
    return new Promise((resolve,reject)=>{
        // axiso 自带 get 和 post 方法
        $http.get(url,{
            params,
        }).then(res=>{
            if(res.data.status===0){
                resolve(res.data);
            }else{
                alert(res.data.msg)
            }
        }).catch(error=>{
            alert('网络异常');
        })
    })
}

export const post = (url,params)=>{
    params = params || {};
    return new Promise((resolve,reject)=>{
        $http.post(url,params).then(res=>{
            if(res.data.status===0){
                resolve(res.data);
            }else{
                alert(res.data.msg);
            }
        }).catch(error=>{
            alert('网络异常');
        })
    })
}