Vue基于Axios网络请求封装

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

二、结构 api.js 将所有的接口统一管理 request.js 对网络请求进行了封装操作 image.png 三、封装代码 api.js //api地址 const HOST = "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} */ // 错误和失败信息都在这里进行处理，界面中调用的时候只处理正确数据即可 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} */ 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界面使用

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

作者：calary 链接：www.jianshu.com/p/0e6e673b6… 来源：简书 著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。