在vue项目中的axios使用配置记录
默认vue项目中已经安装axios,基于element-ui开发,主要记录配置的相关。
- axiosConfig.js
import Vue from 'vue'
import axios from 'axios'
import qs from 'qs'
import { Message, Loading } from 'element-ui'
// 响应时间
axios.defaults.timeout = 5 * 1000
// 配置cookie
// axios.defaults.withCredentials = true
// 配置请求头
axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded;charset=UTF-8'
// 静态资源
Vue.prototype.$static = '' // 配置接口地址
axios.defaults.baseURL = ''
var loadingInstance
// POST传参序列化(添加请求拦截器)
axios.interceptors.request.use(
config => {
loadingInstance = Loading.service({
lock: true,
text: '数据加载中,请稍后...',
spinner: 'el-icon-loading',
background: 'rgba(0, 0, 0, 0.7)'
})
if (config.method === 'post') {
config.data = qs.stringify(config.data)
}
return config
},
err => {
loadingInstance.close()
Message.error('请求错误')
return Promise.reject(err)
}
)
// 返回状态判断(添加响应拦截器)
axios.interceptors.response.use(
res => {
if (res.data.code === 200) {
loadingInstance.close()
return res
} else {
loadingInstance.close()
Message.error(res.data.msg)
}
},
err => {
loadingInstance.close()
Message.error('请求失败,请稍后再试')
return Promise.reject(err)
}
)
// 发送请求
export function fetchPost (url, params) {
return new Promise((resolve, reject) => {
axios
.post(url, params)
.then(
res => {
resolve(res.data)
},
err => {
reject(err.data)
}
)
.catch(err => {
reject(err.data)
})
})
}
export function fetchGet (url, params) {
return new Promise((resolve, reject) => {
axios
.get(url, {
params: params
})
.then(res => {
resolve(res.data)
})
.catch(err => {
reject(err.data)
})
})
}
main.js 配置
import { fetchGet, fetchPost} from './api/axiosConfig'
Vue.prototype.$get = fetchGet
Vue.prototype.$post = fetchPost
组件内部的调用
先引入 封装的js文件
methods: {
...mapMutations(["initGoods"]),
getGoodsInfo() {
let params = {
goods_id: this.getGoodsId
}; api
.getGoodsInfo(params)
.then(res => {
this.goodsInfo = res.data;
})
.catch(() => {});
}
}
在vue项目中的axios使用配置记录的更多相关文章
- 在vue项目中使用axios发送FormData
这个是axios的中文文档,挺详细的: https://www.kancloud.cn/luponu/axios/873153 文档中的 使用 application/x-www-form-ur ...
- vue项目中关于axios的简单使用
axios介绍 Axios 是一个基于 promise 的 HTTP 库,可以用在浏览器和 node.js 中 官方仓库:https://github.com/axios/axios 中文文档:htt ...
- 在vue项目中使用axios
安装 cnpm i axios --save-dev 在项目main.js中全局引用 import axios from "axios" Vue.prototype.$http=a ...
- 介绍vue项目中的axios请求(get和post)
一.先安装axios依赖,还有qs依赖 npm install axios --save npm install qs --save qs依赖包用post请求需要用到的 插入一个知识点: npm in ...
- vue项目中对axios的二次封装
近来在使用vue重构公司m站时,使用了axios来进行数据的请求,由于项目的需要,对axios进行了二次封装,点击进入axios //引入axios import axios from 'axios' ...
- vue项目中使用axios上传图片等文件
form表单提交图片会刷新页面,也可以时form绑定到一个隐藏的iframe上,可以实现无刷新提交数据. html代码: <input name="file" type=&q ...
- 在vue项目中使用canvas-nest.js,报parameter 1 is not of type 'Element'
canvas-nest.js是一款轻量的网页特效,如图: github地址:https://github.com/hustcc/canvas-nest.js 在普通的html项目中,只要将<sc ...
- 浅谈 Axios 在 Vue 项目中的使用
介绍 Axios 是一个基于 promise 的 HTTP 库,可以用在浏览器和 node.js 中. 特性 它主要有如下特性: 浏览器端发起XMLHttpRequests请求 Node端发起http ...
- vue项目中 axios 和Vue-axios的关系
文章收集于:https://segmentfault.com/q/1010000010812113 在vue项目中,会经常看到如下代码: 今天看到有些项目是这样写的,就有点看不懂了. ----解 ...
随机推荐
- URL篇之URL
URL(统一资源定位)是网络上使用的资源定位的方案,它是URI(由URL和URN组成)的子集. URL的通用格式 <scheme>://<user>:<password& ...
- 单元测试框架AndroidTestCase
我不是讲怎么成为一个安卓测试员,就不写那么多了 就写我们常用的, AndroidTestCase 为一Android平台下通用的测试类,它支持所有JUnit的Assert方法和标准的setUp 和te ...
- 给python解释器本身添加注册表
import sys from _winreg import * # tweak as necessary version = sys.version[:3] installpath = sys.pr ...
- js event事件绑定的方法
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" ...
- [转]Create Custom Exception Filter in ASP.NET Core
本文转自:http://www.binaryintellect.net/articles/5df6e275-1148-45a1-a8b3-0ba2c7c9cea1.aspx In my previou ...
- jqGrid随窗口大小变化自适应宽度
$(function(){ $(window).resize(function(){ $("#jqgridID").setGridWidth($(window).width()); ...
- haproxy/nginx+keepalived负载均衡 双机热备 邮件报警 实战及常见问题
Haproxy 做http和tcp反向代理和负载均衡keepalived 为两台 Haproxy 服务器做高可用/主备切换.nginx 为内网服务器做正向代理,如果业务需求有变化,也可以部分替代 ...
- GIS中的坐标系定义与转换
GIS中的坐标系定义与转换 青岛海洋地质研究所 戴勤奋 2002-3-27 14:22:47 ----------------------------------------------------- ...
- 【Linux】 Linux编程规范&Linux 编程环境搭建
一.通过Samba映射网络驱动器 菜单栏-计算机-映射网络驱动器 English 菜单栏-Home -Easy access-Map as drive 编辑代码使用 Windows 编译 运行程序在 ...
- 【起航计划ObjC 002】印第安老斑鸠ObjC的幻想 ---- Ubuntu下安装并使用MAC虚拟机
本文介绍如何在Ubuntu下安装Mac OS X Mavericks系统.具体如下: 1)安装前准备工作 下载Mac OS X Mavericks系统,地址:http://pan.baidu.com/ ...