创建httpService.js 文件


import axios from 'axios';
import { Loading , Message } from 'element-ui';
import { Vuevm } from '../main';
window.Vuevm = Vuevm;
const BASE_URL = process.env.BASE_API; //域名路径 const formatParams = (data)=>{
let arr = [];
for (let name in data) {
arr.push(encodeURIComponent(name) + "=" + encodeURIComponent(data[name]));
}
return arr.join("&");
} axios.defaults.timeout = 15000; //超时时间 export const httpService = (url,params,method,loading=true) => {
if(loading)
{
var loadingInstance = Loading.service({
lock: true,
text: '加载中',
spinner: "el-icon-loading",
background: "rgba(0, 0, 0, 0.7)"
});
} if(method === 'post')
{
return new Promise((resolve, reject) => {
axios.post(BASE_URL+url, params,{
headers: {
'Content-Type': 'application/x-www-form-urlencoded'
}
}).then(data=>{
if(loading) loadingInstance.close();
resolve(data.data); }).catch(error=>{
reject(error);
Message.error('网络不给力');
if(loading) loadingInstance.close();
});
})
}
else
{
return new Promise((resolve, reject) => {
axios.get(BASE_URL+url+'?'+formatParams(params)).then(data=>{
resolve(data.data);
if(loading) loadingInstance.close();
}).catch(error=>{
Message.error('网络不给力');
if(loading) loadingInstance.close();
reject(error);
});
})
}
}

  创建 使用的接口API 文件 api.js


import { httpService } from './httpService';

/**
* @name 医院列表
* @param {*} params
*/ export const hospitalList = (params) =>{
return httpService('hospital/list',params,'get');
} /**
* @name 医院详情
* @param {*} params
*/ export const hospitalDetail = (params) =>{
return httpService('/hospital/detail',params,'get');
}

  页面引用 使用 index.vue


<template>
<div class="commodit"> </div>
</template> <script>
import { hospitalList, hospitalDetail } from "@/api/hospital";
export default {
name: "Commodit",
components: { },
data() {
return {
tableData: [],
};
},
created() {
this.hospitalList()
},
methods: {
//获取 医院列表
async hospitalList() {
var data = { hospitalName: '', pageSize: 10, pageNum: 1 };
const listData = await hospitalList(data);
console.log(listData)
if( listData.code==0 ){
this.tableData = listData.data.records
} },
}
};
</script> <style scoped lang="scss">
@import "../../filters/css/all.css"; .commodit { }
</style>

  

VUE axios请求 封装 get post Http的更多相关文章

  1. Vue: axios 请求封装及设置默认域名前缀 (for Vue 2.0)

    1. 实现效果 以get方法向http://192.168.32.12:8080/users 发起请求.获取数据并进行处理 this.apiGet('/users', {}) .then((res) ...

  2. axios请求封装和异常统一处理

    前端网络请求封装前端采用了axios来处理网络请求,为了避免在每次请求时都去判断各种各样的网络情况,比如连接超时.服务器内部错误.权限不足等等不一而足,我对axios进行了简单的封装,这里主要使用了a ...

  3. vue axios接口封装、Promise封装、简单的axios方法封装、vue接口方法封装、vue post、get、patch、put方法封装

    相信大家在做前后端数据交互的时候都会给请求做一些简单的封装就像之前封装ajax方法一样axios的封装也是一样的简单下面这个就是封装的axios的方法,require.js import axios ...

  4. 10. vue axios 请求未完成时路由跳转报错问题

    axios 请求未完成时路由跳转报错问题 前两天项目基本功能算是完成了,在公司测试时遇到了遇到了一个问题,那就是在请求未完成时进行路由跳转时会报错,想了几种办法来解决,例如加loading,请求拦截, ...

  5. Vue Axios 的封装使用

    目录 Axios 说明 安装 Axios 请求配置 响应结构 常用请求方法 默认值配置 全局的 请求配置项 自定义实例默认值 配置的优先顺序 拦截器 个人完整 axios 配置 Axios 说明 Ax ...

  6. vue axios 请求 https 的特殊处理

    最近遇到自签发的CA证书,在前端axios请求https请求时,无法自动加载证书. 解决方法:将无法加载的请求在浏览器新窗口手动加载,选择继续连接. 重新加载,问题解决. 根本原因:因为自签发证书,浏 ...

  7. vue axios 请求本地接口端口不一致出现跨域设置代理

    首先在config下面的index.js,设置跨域代理 在axios请求的时候     用'/api/' 替代baseURL 最重要的就是设置完必须重新 npm run dev 否则不生效

  8. vue+axios请求头封装

    import { mapMutations } from 'vuex' import axios from 'axios' import { Toast } from 'mint-ui'; impor ...

  9. vue axios 简单封装以及思考

    先安装 axios npm install axios axios的详细介绍以及用法 就不多说了请 移步 github ➡️  https://github.com/axios/axios 下面是简单 ...

随机推荐

  1. 中文字体压缩器-解决css引入的字体太大的问题

    字蛛是一个中文字体压缩器 官方网站:http://font-spider.org/index.html 用于解决页面引入的css字体过大的问题 使用方法: npm i -g font-spider 在 ...

  2. Ness

    三年前与三年后. 今年五月到六月,因为某个原因和蒋哥一起开发了个小游戏.虽然比较粗糙,也没有取得什么,但不管怎么说也是心头肉呀--我比较没用,前期因为ACTF在划水,后期因为ICPC在划水,中间信心满 ...

  3. 手把手教你利用Jenkins持续集成iOS项目

    前言 众所周知,现在App的竞争已经到了用户体验为王,质量为上的白热化阶段.用户们都是很挑剔的.如果一个公司的推广团队好不容易砸了重金推广了一个APP,好不容易有了一些用户,由于一次线上的bug导致一 ...

  4. 从2019-nCoV趋势预测问题,联想到关于网络安全态势预测问题的讨论

    0. 引言 在这篇文章中,笔者希望和大家讨论一个话题,即未来趋势是否可以被精确或概率性地预测. 对笔者所在的网络安全领域来说,由于网络攻击和网络入侵常常变现出随机性.非线性性的特征,因此纯粹的未来预测 ...

  5. Python开发(一):Python介绍与基础知识

    Python开发(一):Python介绍与基础知识 本次内容 一:Python介绍: 二:Python是一门什么语言 三:Python:安装 四:第一个程序 “Hello world” 五:Pytho ...

  6. D3.js实现拓扑图

    最近写项目需要画出应用程序调用链的网路拓扑图,完全自己写需要花费些时间,那么首先想到的是echarts,但echarts的自定义写法写起来非常麻烦,而且它的文档都是基于配置说明的,对于自定义开发不太方 ...

  7. 原生js实现replace方法

    今天看到有人提问js的replace方法怎么实现的,自己就试了试js手册里的String对象的介绍replace大概是这样: string.replace(regexp, replacement) 第 ...

  8. 【Geek议题】合理的VueSPA架构讨论(上)

    前言 web前端发展到现代,已经不再是严格意义上的后端MVC的V层,它越来越向类似客户端开发的方向发展,已独立拥有了自己的MVVM设计模型.前后端的分离也使前端人员拥有更大的自由,可以独立设计客户端部 ...

  9. 前端每日实战:17# 视频演示如何用纯 CSS 创作炫酷的同心矩形旋转动画

    效果预览 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/bMvbRp 可交互视频教程 此视频 ...

  10. Linux中软连接和硬连接的区别

    首先,我们要清楚符号链接的目的,在不改变原目录/文件的前提下,起一个方便的别名(在这起个别名,让我想到前阶段学C里typedef也是起别名的). 1.软连接就相当于windows的快捷方式.例如:ln ...