zongducha / lyqnotes Goto Github PK

import Vue from 'vue'
export default function pushQin(f, token, cak) {
    var fp = [] // 空数组，存放批量上传后返回的url
    for(let i in f){
        let param = new FormData(); //创建form对象
        // 文件名字
        param.append('key', f[i].file.name);
        // 七牛识别的上传凭证token
        param.append('token', token);
        // 文件资源
        param.append('file', f[i].file);

        Vue.http
            .post("http://upload.qiniu.com", param, {
                emulateJSON: true,
                headers: {
                    "Content-Type": "multipart/form-data"
                }
            })
            .then(r => {
                fp.push('https://ohp96o3wl.qnssl.com/' + r.body.key)
                if(fp.length == f.length){
                    cak(fp)
                }
            })
            .catch(e => {
                console.log(e);
            });
    }
    // let param = new FormData(); //创建form对象
    // param.append('key', t[0].file.name);
    // param.append('token', this.token.qn_upToken);
    // param.append('file', t[0].file);

    // Vue.http
    //     .post("http://upload.qiniu.com", param, {
    //         emulateJSON: true,
    //         headers: {
    //             "Content-Type": "multipart/form-data"
    //         }
    //     })
    //     .then(r => {
    //         console.log('https://ohp96o3wl.qnssl.com/' + r.body.key);
    //     })
    //     .catch(e => {
    //         console.log(e);
    //     });
}

function thenPromise(PromiseRelase, x, resolve, reject){
    //判断x是不是在等待自己的resolve
   //    let p = new Promise(resolve => {
   //          resolve(0);
   //      });
   //      var p2 = p.then(data => {
   //          // 循环引用，自己等待自己完成，一辈子完不成
   //          return p2;
   //      })
    if(x === PromiseRelase){ 
        return reject(TypeError('Chaining cycle detected for promise'))
    }
    let repeat; //  防止重复调用
    if(x != null && (typeof x === 'object' || typeof x === 'function')){
        try {
            //  Promise A+规定，声明then == x的方法,,,
            let then = x.then
            //  如果then不是一个方法，也就是说then不是一个new promise，是一个普通的值
            if(typeof then == 'function'){
                //  x是一个new Promise，所以会有then方法
                then.call(x, y => {
                    if(repeat) return;
                    repeat = true;
                    //  如果resolve还是一个promise，继续递归解析
                    thenPromise(PromiseRelase, y, resolve, reject)
                }, e => {
                    if(repeat) return;
                    repeat = true;
                    reject(e)
                })
                
            }else{
                resolve(x)
            }
        } catch (e) {
            //  异常也会报错
            if(repeat) return;
            repeat = true;
            reject(e)
        }
    }else{
        //  x是一个普通值，可以直接输出
        resolve(x)
    }
}

class Promise{
    constructor(fn){
        this.state = 'pending'; //  当前状态值, pending---等待，resolve---成功，reject---失败
        this.value = null; //  成功的值
        this.err = null; //  失败的原因
        this.onFulfilledCallbacks = [] //  存放then成功的数组
        this.onRejectedCallbacks = [] //  存放this失败的数组
        let resolve = value => { // 成功的回调
            if(this.state == 'pending'){ //  等待的状态下赋值并且执行成功数组的回调
                this.value = value
                this.state = 'fulfilled';
                this.onFulfilledCallbacks.forEach(fn => fn()) //  赋值后依次执行成功里的回调
            }
        }
        let reject = err => { //  与resolve同理
            if(this.state == 'pending'){
                this.err = err
                this.state = 'rejected'
                this.onRejectedCallbacks.forEach(fn => fn()) //  赋值后依次执行失败里的回调
            }
        }


        try {
            fn(resolve, reject);
        } catch (error) {
            reject(error)
        }
    }
    

    then(onFulfilled, onRejected){
        // 如果不是function，则直接输出值
        onFulfilled = typeof onFulfilled === 'function' ? onFulfilled : value => value;
        onRejected = typeof onRejected === 'function' ? onRejected : err => ( TypeError(err) );

        
        let PromiseRelase = new Promise( (resolve, reject) => {//  声明要返回的promise，用于链式调用then
            if(this.state == 'fulfilled'){
                //  使用setTimeout()实现then中onFulfilled和onRejected不能同步调用，只能异步调用,Promise A+规范规定
                setTimeout(() => {
                    try {
                        var x = onFulfilled(this.value) //  相当于 x.then( onFulfilled(this.value) => {...}) value就是resolve的值
                        //  将then--------return的x值传给下一个then
                        thenPromise(PromiseRelase, x, resolve, reject)
                    } catch (e) {
                        reject(e)
                    }
                }, 0)
            }
            if(this.state == 'reject'){
                setTimeout(()=>{
                    try {
                        var x = onRejected(this.err) //  同上
                        thenPromise(PromiseRelase, x, resolve, reject)
                    } catch (e) {
                        reject(e)
                    }
                }, 0)
            }


            if(this.state == 'pending'){ //  当异步时，state还未改变
                this.onFulfilledCallbacks.push(()=>{ //  将成功的回调保存至数组中，当resolve执行时执行数组中的回调函数
                    setTimeout(() => {
                        try {
                            var x = onFulfilled(this.value)
                            thenPromise(PromiseRelase, x, resolve, reject)
                        } catch (e) {
                            reject(e)
                        }
                    }, 0)
                })
                this.onRejectedCallbacks.push(()=>{ //  将失败的回调保存至数组中，当reject执行时执行数组中的回调函数
                    var x = onRejected(this.err)
                    thenPromise(PromiseRelase, x, resolve, reject)
                })
            }
        })
        //  链式then
        return PromiseRelase;
    }
}


var pro = new Promise(rev  => {
    rev(123)
})
pro.then(res => {
    return new Promise(rev => {
        rev(1111)
    })
}).then( res => {
    return new Promise(rev => {
        rev(222)
    })
}).then( res => {
    // console.log(res)
})

import Vue from 'vue'
export default function pushQin(f, token, cak) {
    var fp = [] // 空数组，存放批量上传后返回的url
    for(let i in f){
        let param = new FormData(); //创建form对象
        // 文件名字
        param.append('key', f[i].file.name);
        // 七牛识别的上传凭证token
        param.append('token', token);
        // 文件资源
        param.append('file', f[i].file);

        Vue.http
            .post("http://upload.qiniu.com", param, {
                emulateJSON: true,
                headers: {
                    "Content-Type": "multipart/form-data"
                }
            })
            .then(r => {
                fp.push('https://ohp96o3wl.qnssl.com/' + r.body.key)
                if(fp.length == f.length){
                    cak(fp)
                }
            })
            .catch(e => {
                console.log(e);
            });
    }
    // let param = new FormData(); //创建form对象
    // param.append('key', t[0].file.name);
    // param.append('token', this.token.qn_upToken);
    // param.append('file', t[0].file);

    // Vue.http
    //     .post("http://upload.qiniu.com", param, {
    //         emulateJSON: true,
    //         headers: {
    //             "Content-Type": "multipart/form-data"
    //         }
    //     })
    //     .then(r => {
    //         console.log('https://ohp96o3wl.qnssl.com/' + r.body.key);
    //     })
    //     .catch(e => {
    //         console.log(e);
    //     });
}