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的桌面端组件库

觉得有帮助，给点个❤️吧