vue---封装request做数据请求
参考文章:
https://www.cnblogs.com/qiuchuanji/p/10048805.html
https://www.cnblogs.com/XHappyness/p/9993878.html
代码示例:
import axios from 'axios' // 创建一个axios实例
const service = axios.create({
// headers: {
// 'content-type': 'application/json;charset=UTF-8',
// 'token': 'one'
// },
baseURL: 'http://dianphp.fyz.com',
withCredentials: true,
timeout: 5000
}) // 添加请求拦截器
service.interceptors.request.use(config => {
// 在发送请求之前做某事,比如说 设置token
// config.headers['token'] = 'token';
config.headers['X-Token'] = 'xxxxxxxxxxxxxxxxxxx';
return config;
}, error => {
// 请求错误时做些事
return Promise.reject(error);
}); // 添加响应拦截器
service.interceptors.response.use(response => {
const res = response.data;
// 如果返回的状态不是200 就主动报错
if(res.state != 200){
return Promise.reject(res.message || 'error')
}
return response;
}, error => {
return Promise.reject(error.response.data); // 返回接口返回的错误信息
}) export default service
vue---封装request做数据请求的更多相关文章
- Vue 封装axios(四种请求)及相关介绍(十三)
Vue 封装axios(四种请求)及相关介绍 首先axios是基于promise的http库 promise是什么? 1.主要用于异步计算 2.可以将异步操作队列化,按照期望的顺序执行,返回符合预期的 ...
- vue使用axios发送数据请求
本文章是基于vue-cli脚手架下开发 1.安装 npm install axios --s npm install vue-axios --s 2.使用.在index.js中(渲染App组件的那个j ...
- vue使用Axios做ajax请求
vue2.0之后,就不再对vue-resource更新,而是推荐使用axios 1. 安装 axios $ npm install axios 或 $ bower install axios 2. 在 ...
- VUE.JS 使用axios数据请求时数据绑定时 报错 TypeError: Cannot set property 'xxxx' of undefined 的解决办法
正常情况下在data里面都有做了定义 在函数里面进行赋值 这时候你运行时会发现,数据可以请求到,但是会报错 TypeError: Cannot set property 'listgroup' of ...
- vue中简单的数据请求 fetch axios
fetch 不需要额外的安装什么东西,直接就可以使用 fetch(url, { method:'post', headers: { 'Content-Type': 'application/x-www ...
- vue---发送数据请求的一些列的问题
使用vue做数据请求,首先考虑的是封装请求方法request.js import axios from 'axios' import Qs from 'qs' // 创建一个axios实例 const ...
- 运行命令区分webpack环境,以及axios数据请求的封装
在开发环境和线上环境时,由于环境的不同,有时候需要修改一定的代码,可以通过配置webpack环境来减少对代码的修改:另外,有时候去看别人的代码,你可能都找不到他的数据请求在什么位置,最近在做一个vue ...
- mpvue学习笔记-之微信小程序数据请求封装
简介 美团出品的mpvue已经开源出来很久了,一直说要进行一次实践,这不最近一次个人小程序开发就用上了它. 看了微信官方的数据请求模块--request,对比了下get和post请求的代码,发现如果在 ...
- $Django 前后端之 跨域问题(同源策略) vue项目(axios跨域请求数据)
1 跨域问题(多个域之间的数据访问) #同源策略(ip port 协议全部相同) #本站的只能请求本站域名的数据 #CORS实现(跨域资源共享) #实现CORS通信的关键是服务器.只要服务器实现了CO ...
随机推荐
- Python模块(导入,内置,自定义,开源)
目录: 模块介绍 自定义模块 内置模块 开源模块 一.模块 1.模块简介 模块是一个包含所有你定义的函数和变量的文件,其后缀名是.py.模块可以被别的程序引入,以使用该模块中的函数等功能.这也是使用p ...
- HDU4814——数学,模拟进制转换
本题围绕:数学公式模拟进制转换 HDU4814 Golden Radio Base 题目描述 将一个十进制的非负整数转换成E(黄金分割数)进制的数 输入 不大于10^9的非负整数,处理到文件尾 输出 ...
- Centos7 Rsync怎么实现热备份笔记
应用场景:备份Web服务器相关目录下的数据文件,确保指定目录下的所有文件同步. 操作系统:Centos 7 服务器两台:web服务器 172.19.242.70 备份服务器 172.19.242.7 ...
- 异常检测(Anomaly detection): 什么是异常检测及其一些应用
异常检测的例子: 如飞机引擎的两个特征:产生热量与振动频率,我们有m个样本画在图中如上图的叉叉所示,这时来了一个新的样本(xtest),如果它落在上面,则表示它没有问题,如果它落在下面(如上图所示), ...
- windows 10 下使用Navicat for oracle 数据库还原
一.前期准备 1.安装windows 10系统 2.安装oracle 11g 数据库 3.安装PLsql(也不需要) 4.安装sqlplus(这个必须有) 5.使用下面这个东西新建数据库(不懂创建的话 ...
- async-validator:Element表单验证
转载文章:Element表单验证(2) Element表单验证(2) 上篇讲的是async-validator的基本要素,那么,如何使用到Element中以及怎样优雅地使用,就在本篇. 上篇讲到a ...
- tf.logging.set_verbosity
tf.logging.set_verbosity (tf.logging.INFO) 作用:将 TensorFlow 日志信息输出到屏幕
- Node.js是什么?提供了哪些内容?
什么是Node.js? Node.js是基于Chrome V8 引擎的 JavaScript运行时(运行环境). Node.js提供了哪些内容? Node.js运行时,JavaScript代码运行时的 ...
- ARDUIN人体检测模块
http://henrysbench.capnfatz.com/henrys-bench/arduino-sensors-and-input/arduino-hc-sr501-motion-senso ...
- Clickhouse 性能瓶颈排查 IO过高
前几天公司clickhouse 有个查询很慢.经理一直追问为什么慢 是cpu 不够 还是IO 占用太高,还是其他的原因.于是有了以下的排查 执行该条,在不考虑优化sql 的情况下 进行性能排查 1.首 ...