vue中对axios进行封装
在刚结束的项目中对axios进行了实践(好不容易碰上一个不是jsonp的项目),
以下为在项目中对axios的封装,仅封装了post方法,因为项目中只用到了post,如有需要请自行进行修改
src/config.js
//api接口前缀
export const apiBaseUrl = 'http://xxx.xxx.xxx.xxx:8888/test/'
src/axios.js
import axios from 'axios'
import qs from 'qs'
import { apiBaseUrl } from './config.js' //请求拦截器
axios.interceptors.request.use(function (param) {
return param
}, function (error) {
// 请求错误
return Promise.reject(error)
}) // 添加响应拦截器
axios.interceptors.response.use(function (response) {
return response.data
}, function (error) {
// 响应错误
return Promise.reject(error)
}) // 封装axios--------------------------------------------------------------------------------------
function apiAxios(url, params) {
let httpDefault = {
method: "POST",
baseURL: apiBaseUrl,
url: url,
data: qs.stringify(params),
} return new Promise((resolve, reject) => {
axios(httpDefault)
// 此处的.then属于axios
.then((res) => {
resolve(res)
}).catch((response) => {
reject(response)
})
})
} export default {
install: function (Vue) {
Vue.prototype.$axios = (url, params) => apiAxios(url, params)
}
}
src/main.js
import axios from "@/axios.js" Vue.use(axios)
vue中对axios进行封装的更多相关文章
- vue中采用axios发送请求及拦截器
这几天在使用vue中axios发送get请求的时候很顺手,但是在发送post请求的时候老是在成功的回调函数里边返回参数不存在,当时就纳闷了,经过查阅资料,终于得到了解决方案,在此做一总结: 首先我们在 ...
- vue中使用axios与axios的请求响应拦截
VUE中使用Axios axios的安装 npm install axios vue-axios axios在vue的配置与使用 在main.js中引入axios和vue-axios import a ...
- vue中使用axios最详细教程
前提条件:vue-cli 项目 安装: npm npm 在main.js导入: // 引入axios,并加到原型链中 import axios from 'axios'; Vue.prototype. ...
- vue中使用axios进行http通信
1.安装 npm install axios 2.在main.js中全局注册 // axios不可以通过use引入,可以通过修改vue原型链 import axios from 'axios' Vue ...
- vue中配置axios.js文件,发送请求
为了统一管理请求,每个项目都会去配置axios:而不是在vue中直接使用,那样不好维护等等 下面是我配置的最基础的axios文件 第一步:首先新建一个axios文件,我是放在router文件下的 im ...
- vue中使用axios
1.结合vue-axios使用 vue-axios是按照vue插件的方式去写的,那么结合vue-axios就可以使用Vue.use()这个方法import axios from 'axios' imp ...
- vue中的axios
数据的获取最常用的就是用ajax,但在vue框架中,axios则更为方便.它是基于es6的promise 以下内容引用自[最骚的就是你] 不再继续维护vue-resource,并推荐大家使用 axio ...
- vue中使用axios发送请求
我们知道,vue2.0以后,vue就不再对vue-resource进行更新,而是推荐axios,而大型项目都会使用 Vuex 来管理数据,所以这篇博客将结合两者来发送请求 1.安装axios cnpm ...
- Vue中使用axios发送ajax请求
作为前后端交互的重要技巧--发送ajax请求,在Vue中我们使用axio来完成这一需求: 首先是下载axios的依赖, npm install --save axios vue-axios 然后在ma ...
随机推荐
- IMEI
IMEI(International Mobile Equipment Identity)是国际移动设备身份码的缩写,国际移动装备辨识码,是由15位数字组成的"电子串号",它与每台 ...
- interface21 - web - Log4jConfigListener(Log4j加载流程)
前言 最近打算花点时间好好看看spring的源码,然而现在Spring的源码经过迭代的版本太多了,比较庞大,看起来比较累,所以准备从最初的版本(interface21)开始入手,仅用于学习,理解其设计 ...
- Hadoop项目实战-用户行为分析之编码实践
1.概述 本课程的视频教程地址:<用户行为分析之编码实践> 本课程以用户行为分析案例为基础,带着大家去完成对各个KPI的编码工作,以及应用调度工作,让大家通过本课程掌握Hadoop项目的编 ...
- Spring Boot + Spring Cloud 构建微服务系统(一):服务注册和发现(Consul)
使用Consul提供注册和发现服务 什么是 Consul Consul 是 HashiCorp 公司推出的开源工具,用于实现分布式系统的服务发现与配置.与其它分布式服务注册与发现的方案,Consul ...
- Elasticsearch从入门到精通之Elasticsearch基本概念
导读 在上一章节我们介绍Elasticsearch前世今生,今天我们继续进行本章内容,Elasticsearch的核心概念.从一开始就理解这些概念将极大地帮助简化学习过程. 近实时(NRT) Elas ...
- sql 表连接
join (inner join ) 注释:INNER JOIN 关键字在表中存在至少一个匹配时返回行. left join 注释:LEFT JOIN 关键字从左表(table1)返回所有的行,即 ...
- 根域名服务器(root DNS Servers)会被DDoS打垮么?
域名服务作为互联网的基础设施,它的重要性不言而喻.目前全球的十三个根域名服务器和成千上万的授权域名服务器承担着超过万亿次的DNS查询,默默为全世界的网民做域名解析服务. 这样重要的基础设施,必然是全世 ...
- WEB安全:Tomcat 只可通过域名访问,禁止通过 IP 访问
服务器为什么要禁止通过IP直接访问? 1.若公布于外网的服务器IP地址未备案,就有可能被工信部查封.这样备案的域名也会无法访问. 2.如果AppScan通过ip访问扫描,会有“发现内部ip泄露模式”的 ...
- .net项目技术选型总结
做.net开发已经几年了,也参与开发了很多大大小小的项目,所以现在希望总结出一套开发.net项目的常用技术,也为以后做项目技术选型的时候作为参考. 数据库 小型项目:SQLite(工具) 中大型项目: ...
- 关于height,line-height导致的样式混乱的问题
设置固定border,padding,line-height,但是发现在ie下input标签竟然line-height不起作用,导致实际的高度无法控制 解决方法:添加固定高度height.