关于前端:Vue基于Axios网络请求封装

一、前言

最近开始入门 Vue 开发 web 我的项目，调试接口的时候抽时间将 axios 网络申请进行了封装，以便当前应用，代码中用到的网络库和组件库，在文末都有链接。

二、构造

• api.js 将所有的接口对立治理
• request.js 对网络申请进行了封装操作

  image.png

三、封装代码

• api.js

//api 地址
const HOST = "http://xxx.com";
const API = HOST + "/api/public/";

const Apis = {
    // 产品
    getProduct: API + 'product',
    // 微信购买
    wxPay: API + 'weixinPay',
}
export default Apis 

• request.js

import Apis from "./api";
import axios from 'axios'
import {Message} from 'element-ui';

const METHOD = {
    GET: 'get',
    POST: 'post'
}
/**
 * 网络申请
 * @param method 办法
 * @param url 接口地址
 * @param params 参数
 * @param showError 是否展现错误信息
 * @returns {Promise<any>}
 */
// 谬误和失败信息都在这里进行解决，界面中调用的时候只解决正确数据即可
function request(method, url, params, showError) {if (showError || showError == undefined){ // 是否展现错误信息
        showError = true;
    }else {showError = false;}
    return new Promise((resolve, reject) => {
        axios({
            method: method,
            url: url,
            params: params
        }).then((res) => {if (res.data.code == 0) { // 0 是申请胜利
                resolve(res.data.data);
            } else { // 其余状况返回错误信息，依据须要解决
                reject(res.data);
                if (showError){Message.error(res.data.message);
                }
            }
        }).catch(() => {if (showError){Message.error('申请失败，请稍后再试');
            }
        });
    });
}

/**
 * 图片上传
 * @param url 地址
 * @param params 参数 FormData
 * @param showError 是否展现谬误
 * @returns {Promise<any>}
 */
function uploadRequest(url, params, showError) {if (showError || showError == undefined){showError = true;}else {showError = false;}
    let config = {headers: { "Content-Type": "multipart/form-data"},
    }
    return new Promise((resolve, reject) => {axios.post(url,params,config).then((res) => {if (res.data.code == 0) {resolve(res.data.data);
            } else {reject(res.data);
                if (showError){
                    Message({
                        type: 'error',
                        message: res.data.message,
                        duration: 1000
                    });
                }
            }
        }).catch(() => {if (showError){
                Message({
                    type: 'error',
                    message: '申请失败，请稍后再试',
                    duration: 1000
                });
            }
        });
    });
}

function get(url, params, showError) {return request(METHOD.GET, url, params, showError);
}

function post(url, params, showError) {return request(METHOD.POST, url, params, showError);
}

function upload(url, params, showError) {return uploadRequest(url, params, showError);
}
const API = {
    // 产品
    getProduct: (params) => post(Apis.getProduct, params),
    // 微信购买
    wxPay: (params) => post(Apis.wxPay, params),
}

function install(Vue) {Vue.prototype.$request = API;}
export default install 

4、具体应用

• main.js 引入

import VueRequest from './js/vuex/request'
Vue.use(VueRequest); 

• xxx.vue 界面应用

<script>
    export default {
        name: "xxx",
        data() {
            return {tableData: []
            }
        },
        mounted() {this.loadModuleData();
        },
        methods: {
            /**
             * 产品数据获取
             */
            loadProductData() {
                let params = {uid: xxx}
                this.$request.getProduct(params).then((data)=>{ // 间接拿到的就是胜利数据，其余状况封装的时候对立解决
                    data.forEach(data => {
                        this.tableData.push({
                            id: data.id || '',
                            name: data.name || '',
                            desc: data.desc || '',
                        })
                    })
                });
            },
           // 文件上传
          uploadFile(file){let params = new FormData();
                params.append('file', file);
                params.append('ucenter_id', this.$store.getUserId());
                this.$request.uploadImage(uploadData).then((res) => {console.log(res);
                });
            }
        }
    }
</script> 

5、情谊延长

• Axios 易用、简洁且高效的 http 库
• Promise 详解
• Element 一套为开发者、设计师和产品经理筹备的基于 Vue 的桌面端组件库
• 宝宝起名

作者：calary
链接：https://www.jianshu.com/p/0e6…
起源：简书
著作权归作者所有。商业转载请分割作者取得受权，非商业转载请注明出处。