vue 网络请求封装

npm install axios

npm install qs
//用途：1.将对象序列化，多个对象之间用&拼（qs.stringify(params)) 
//2.将序列化的内容拆分成一个个单一的对象（qs.parse(params))

api.js

image.png

axios.defaults.baseURL = getHost.getHost() + "/api"; //动态配置网络请求不同环境下的地址

get

export function get(url, params = {}, context) { //context vue 实例

    return new Promise((resolve, reject) => {

        url += "?";

        let keys = Object.keys(params); //处理对象，返回可枚举的属性数组

        console.log('keys',keys)

        for (let i = 0, length = keys.length; i < length; i++) {

            if (i === 0) {

                url += keys[i] + "=";

                url += params[keys[i]];

            } else {

                url += "&" + keys[i] + "=";

                url += params[keys[i]];

            }

        }

        console.log('url',url)

        if(userToken){

            url += '&userToken='+ userToken;

        }

        url += "×tamp="+new Date().getTime(); //加了个时间戳

        url = encodeURI(url);//对url 进行编码

        axios.get(url).then(res => {

            if (res.status === 200) { //http 请求成功

                if (res.data.code === 1000) { //公司内部定义的 code 数据正常返回

                    resolve(res.data.result);

                }else if(res.data.code === 2999){  //请求成功，但数据返回异常

                    xxx //具体不同公司不同code

                    } else {

                                xxxxx
                    }

                } else {

                    let msgContent = res.data.msgContent;

                    if (!isEmpty(msgContent) && context) {

                        context.$toast(msgContent); 

                    }

                    reject({

                        errorMsg: msgContent,

                        detail: res.data

                    });

                }

            } else {

                reject({

                    errorMsg: res.statusText

                })

            }

        }).catch(err => {

            reject(err)

        })

    })

}

post

export function post(url, params = {}, context) {

    if(userToken){

        Object.assign(params,{userToken:userToken}); //合并两个对象

    }

    return new Promise((resolve, reject) => {

        axios.post(url, qs.stringify(params)).then(res => { //序列化字符串

            if (res.status === 200) { 

                if (res.data.code === 1000) { 

                    resolve(res.data.result);

                } else if(res.data.code === 2999){

                    if (getHost.isDev) {

                    xxxxxx

                    } else {

                     xxxxxx

                    }

                } else {

                    let msgContent = res.data.msgContent;

                    if (!isEmpty(msgContent) && context) {

                        context.$toast(msgContent);

                    }

                    reject(res.data.result);

                }

            } else {

                reject({

                    errorMsg: res.statusText

                })

            }

        }).catch(err => {

            reject(err)

        })

    })

}

uploadFile 上传文件、图片

export function uploadFile(url, params = {}, context) {

    if(userToken){

        Object.assign(params,{userToken:userToken});

    }

    return new Promise((resolve, reject) => {

        let formData = new FormData(); //  不支持ie8，ie9  formData里面存储的数据是以健值对的形式存在的

        let keys = Object.keys(params);

        for (let i = 0, length = keys.length; i < length; i++) {

            formData.append(keys[i], params[keys[i]]);

        }

        let config = {

            headers: {

                'Content-Type': 'multipart/form-data' //此处需要添加这个headers

            }

        };

        axios.post(url, formData, config).then(res => {

            if (res.status === 200) {

                if (res.data.code === 1000) {

                    resolve(res.data.result);

                } else if(res.data.code === 2999){

                    if (getHost.isDev) {

                        xxxxx

                    } else {

                        xxxxxx

                    }

                } else {

                    let msgContent = res.data.msgContent;

                    if (!isEmpty(msgContent) && context) {

                        context.$toast(msgContent);

                    }

                    reject(res.data.result);

                }

            } else {

                reject({

                    errorMsg: res.statusText

                })

            }

        }).catch(err => {

            reject(err)

        })

    })

}

main.js

import {get,post,uploadFile} from '../../common/js/api.js'

Vue.prototype.$get = get;

Vue.prototype.$post = post;

Vue.prototype.$uploadFile = uploadFile;

xxx.vue 调用

this.$post(url,codeLoginObj,this).then((response)=>{

})