VUE axios请求 封装 get post Http
创建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的更多相关文章
- Vue: axios 请求封装及设置默认域名前缀 (for Vue 2.0)
1. 实现效果 以get方法向http://192.168.32.12:8080/users 发起请求.获取数据并进行处理 this.apiGet('/users', {}) .then((res) ...
- axios请求封装和异常统一处理
前端网络请求封装前端采用了axios来处理网络请求,为了避免在每次请求时都去判断各种各样的网络情况,比如连接超时.服务器内部错误.权限不足等等不一而足,我对axios进行了简单的封装,这里主要使用了a ...
- vue axios接口封装、Promise封装、简单的axios方法封装、vue接口方法封装、vue post、get、patch、put方法封装
相信大家在做前后端数据交互的时候都会给请求做一些简单的封装就像之前封装ajax方法一样axios的封装也是一样的简单下面这个就是封装的axios的方法,require.js import axios ...
- 10. vue axios 请求未完成时路由跳转报错问题
axios 请求未完成时路由跳转报错问题 前两天项目基本功能算是完成了,在公司测试时遇到了遇到了一个问题,那就是在请求未完成时进行路由跳转时会报错,想了几种办法来解决,例如加loading,请求拦截, ...
- Vue Axios 的封装使用
目录 Axios 说明 安装 Axios 请求配置 响应结构 常用请求方法 默认值配置 全局的 请求配置项 自定义实例默认值 配置的优先顺序 拦截器 个人完整 axios 配置 Axios 说明 Ax ...
- vue axios 请求 https 的特殊处理
最近遇到自签发的CA证书,在前端axios请求https请求时,无法自动加载证书. 解决方法:将无法加载的请求在浏览器新窗口手动加载,选择继续连接. 重新加载,问题解决. 根本原因:因为自签发证书,浏 ...
- vue axios 请求本地接口端口不一致出现跨域设置代理
首先在config下面的index.js,设置跨域代理 在axios请求的时候 用'/api/' 替代baseURL 最重要的就是设置完必须重新 npm run dev 否则不生效
- vue+axios请求头封装
import { mapMutations } from 'vuex' import axios from 'axios' import { Toast } from 'mint-ui'; impor ...
- vue axios 简单封装以及思考
先安装 axios npm install axios axios的详细介绍以及用法 就不多说了请 移步 github ➡️ https://github.com/axios/axios 下面是简单 ...
随机推荐
- 引入 JPEGCodec;JPEGImageEncoder; 图片处理;MyEclipse编译时报错处理
在Eclipse中处理图片,需要引入两个包: import com.sun.image.codec.jpeg.JPEGCodec; import com.sun.image.codec.jpeg.JP ...
- Openstack neutron学习
最近在学习openstack neutron的东西,记录下自己的一些理解. 网络基础知识 Switches & Vlan交换机的作用是来连接设备,实现互通的.network host之间通过交 ...
- iOS开发黑科技之runtime
iOS 开发之黑科技-runtime runtime其实就是oc底层的一套C语音的API 调用方法的本质就是发消息, 1.动态交换两个方法的实现(特别是交换系统自动的方法) 2.动态添加对象的成员变量 ...
- vagrant 虚拟机配置最佳实践
Mac VirtualBox Vagrant 管理虚拟机 这篇文章定位是在理解了 vagrant 相关概念之后,教你如何灵活玩转自己的虚拟机配置 本文为 @favoorr 常用的 Mac Virtua ...
- Vue.observable()使用方法
前言 随着组件的细化,就会遇到多组件状态共享的情况, Vuex当然可以解决这类问题,不过就像 Vuex官方文档所说的,如果应用不够大,为避免代码繁琐冗余,最好不要使用它,今天我们介绍的是 vue.js ...
- Vue源码之组件化/生命周期(个人向)
大致流程 具体流程 组件化 (createComponent) 构造⼦类构造函数 const baseCtor = context.$options._base // plain options ob ...
- 6——PHP顺序结构&&字符串连接符
*/ * Copyright (c) 2016,烟台大学计算机与控制工程学院 * All rights reserved. * 文件名:text.cpp * 作者:常轩 * 微信公众号:Worldhe ...
- 7-4 jmu-python-判断是否构成三角形 (10 分)
7-4 jmu-python-判断是否构成三角形 (10 分) 输入三角形的三边,判断是否能构成三角形.若能构成输出yes,否则输出no. 输入格式: 在一行中直接输入3个整数,3个整数之间各用一 ...
- mysql 存储过程 执行存储过程修改了表中所有行的信息
存储过程中的where条件语句,如果传入的参数和表字段名相同,存储过程就会把这个约束条件忽略.小结:存储过程中传递的参数名不要和字段名相同.特别是修改.删除等操作,可能会对整张表产生影响.后果会很严重 ...
- 初识 jquery.simulate.js 模拟键盘事件
用jquery 和 jquery.simulate.js 实现模拟键盘事件,点击上下左右div相当于点击键盘的上下左右键 <!DOCTYPE html> <html> < ...