vue项目实践-添加axios封装api请求
安装 axios
npm install axios --save
创建实例 (utils/fetch.js)
axios 默认提交格式为:application/json
可使用 qs 模块(需要安装)转换后提交格式为 application/x-www-form-urlencoded
通过设置 transformRequest 属性 data => qs.stringify(data)
可以正常表单形式提交
import axios from 'axios'
const instance = axios.create({
baseURL: 'apiBaseUrl', // api的base_url
timeout: 10000 // 请求超时时间
// transformRequest: data => qs.stringify(data) //
})
// request拦截器
instance.interceptors.request.use(
e => {
e.params = e.params || {}
e.headers = e.headers || {}
//set 默认值
return e
},
error => ({ status: 0, msg: error.message })
)
// respone拦截器
instance.interceptors.response.use(
response => {
const resp = response.data
if (response.status === 200) {
return resp
}
return resp
},
error => {
console.log('err' + error) // for debug
return Promise.reject(error)
}
)
export default instance
将 api 请求封装到 api 文件夹下
在 api 文件中新建接口模块并使用 axios 实例(utils/fetch.js)
src/api/api_test.js
import request from '@/utils/fetch'
export function test(data) {
return request({
url: '/test',
method: 'post',
data: data
})
}
使用的时候,可通过引入 api/模块.js 调用方法,也可以通过安装插件的形式将 api 接口扩展到 vue 实例中,使其可以更方便的在项目中使用
以 test 模块为例创建一个$api 扩展
src/api/index.js
import * as api_test from './test'
const apiObj = {
api_test
}
const install = function(Vue) {
if (install.installed) return
install.installed = true
Object.defineProperties(Vue.prototype, {
$api: {
get() {
return apiObj
}
}
})
}
export default {
install
}
在 main.js 安装 $api 扩展:
import api from './api'
Vue.use(api)
在项目中调用:this.$api.api_test.test().then(resp=>{...}).catch(()=>{...})
vue项目实践-添加axios封装api请求的更多相关文章
- vue项目实践-添加express-mockjs进行数据模拟
mock-server 在新项目开始的时候,后端框架还没有,前端就有能够自己操作的模拟数据的服务是可以有的 express-mockjs 是楼教主结合 express+mock-lite 造的一个轮子 ...
- 如何在VUE项目中添加ESLint
如何在VUE项目中添加ESLint 1. 首先在项目的根目录下 新建 .eslintrc.js文件,其配置规则可以如下:(自己小整理了一份),所有的代码如下: // https://eslint.or ...
- react封装基于axios的API请求
一.最近做的一个后台管理项目,基于antd-pro做的,需要封装基于axios请求,便于开发,直接上代码. import axios from 'axios'; export const Method ...
- 介绍vue项目中的axios请求(get和post)
一.先安装axios依赖,还有qs依赖 npm install axios --save npm install qs --save qs依赖包用post请求需要用到的 插入一个知识点: npm in ...
- vue项目中关于axios的简单使用
axios介绍 Axios 是一个基于 promise 的 HTTP 库,可以用在浏览器和 node.js 中 官方仓库:https://github.com/axios/axios 中文文档:htt ...
- 在vue项目中的axios使用配置记录
默认vue项目中已经安装axios,基于element-ui开发,主要记录配置的相关. axiosConfig.js import Vue from 'vue' import axios from ' ...
- vue项目全局使用axios
共有三种方法: 1.结合 vue-axios使用 首先在主入口文件main.js中引用 import axios from 'axios' import VueAxios from 'vue-axio ...
- 在vue项目中使用axios发送FormData
这个是axios的中文文档,挺详细的: https://www.kancloud.cn/luponu/axios/873153 文档中的 使用 application/x-www-form-ur ...
- Vue项目实践中的功能实现与要点
本贴记录项目实践中,各种功能的实现与技术要点,均有待改进. 路由切换的时候,显示loading动画 目前方案是: 在每个页面都手动装载一个loading组件组件的显示依赖vuex里面的一个值 , 在r ...
随机推荐
- MQTT报文格式
MQTT报文结构 控制报文由三部分组成: 1.Fixed header 固定报头,所有报文都包含 2.Variable header 可变报头,部分报文包含 3.Body 有效载荷,部分报文包含 固定 ...
- 主席树——求区间[l,r]不同数字个数的模板(向左密集 D-query)
主席树的另一种用途,,(还有一种是求区间第k大,区间<=k的个数) 事实上:每个版本的主席树维护了每个值最后出现的位置 这种主席树不是以权值线段树为基础,而是以普通的线段树为下标的 /* 无修改 ...
- centos/redhat/ubuntu不同之处
前言:最近用久了ubuntu,发现这个和centos还是有很大差别的,以下是我的个人总结: centos/redhat/ubuntu不同之处: 1.关系理解:centos和redhat,你可以理解为是 ...
- 2018-2019-2 网络对抗技术 20165328 Exp2 后门原理与实践
实验内容: 任务一:使用netcat获取主机操作Shell,cron启动任务二:使用socat获取主机操作Shell, 任务计划启动任务三:使用MSF meterpreter(或其他软件)生成可执行文 ...
- 实时同步到Hbase的优化-1
最近没有管测试环境的 def putMapData(tableName: String , columnFamily:String, key:String , mapData:Map[String , ...
- 源生API解析XML文档与dom4j解析XML文档
一.XML语言 XML是一种可扩展的标记语言,是一种强类型的语言,类似HTML(超文本标记语言,是一种弱类型的语言).XML是一种通用的数据交换格式(关系型数据库),综上所诉:XML可以传输数据,也可 ...
- 2019工作计划idea
2019.2.24 工作需求: 汇总 2008-2018年 销售订单数据; 分类历史订单数据, 并可能采取方法进行预测(预测只是一种行为不代表结果) 目前已知条件: 订单生产周期; 45天(标准天数) ...
- C++ MD5类封装
c++ md5 算法封装 md5.h #ifndef MD5_H #define MD5_H #include <string> #include <fstream> /* T ...
- Python----爬虫入门系列等
欢迎访问我的人生苦短系列(目前主要是Python爬虫入门) 传送门:https://www.jeson.xin/category/%E4%BA%BA%E7%94%9F%E8%8B%A6%E7%9F%A ...
- java自动化-关键字驱动在junit接口自动化的应用
本文是继承上文的基础上进行的讨论,建议读者先阅读http://www.cnblogs.com/xuezhezlr/p/9097137.html和https://www.cnblogs.com/xuez ...