参考文章:

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做数据请求的更多相关文章

  1. Vue 封装axios(四种请求)及相关介绍(十三)

    Vue 封装axios(四种请求)及相关介绍 首先axios是基于promise的http库 promise是什么? 1.主要用于异步计算 2.可以将异步操作队列化,按照期望的顺序执行,返回符合预期的 ...

  2. vue使用axios发送数据请求

    本文章是基于vue-cli脚手架下开发 1.安装 npm install axios --s npm install vue-axios --s 2.使用.在index.js中(渲染App组件的那个j ...

  3. vue使用Axios做ajax请求

    vue2.0之后,就不再对vue-resource更新,而是推荐使用axios 1. 安装 axios $ npm install axios 或 $ bower install axios 2. 在 ...

  4. VUE.JS 使用axios数据请求时数据绑定时 报错 TypeError: Cannot set property 'xxxx' of undefined 的解决办法

    正常情况下在data里面都有做了定义 在函数里面进行赋值 这时候你运行时会发现,数据可以请求到,但是会报错 TypeError: Cannot set property 'listgroup' of ...

  5. vue中简单的数据请求 fetch axios

    fetch 不需要额外的安装什么东西,直接就可以使用 fetch(url, { method:'post', headers: { 'Content-Type': 'application/x-www ...

  6. vue---发送数据请求的一些列的问题

    使用vue做数据请求,首先考虑的是封装请求方法request.js import axios from 'axios' import Qs from 'qs' // 创建一个axios实例 const ...

  7. 运行命令区分webpack环境,以及axios数据请求的封装

    在开发环境和线上环境时,由于环境的不同,有时候需要修改一定的代码,可以通过配置webpack环境来减少对代码的修改:另外,有时候去看别人的代码,你可能都找不到他的数据请求在什么位置,最近在做一个vue ...

  8. mpvue学习笔记-之微信小程序数据请求封装

    简介 美团出品的mpvue已经开源出来很久了,一直说要进行一次实践,这不最近一次个人小程序开发就用上了它. 看了微信官方的数据请求模块--request,对比了下get和post请求的代码,发现如果在 ...

  9. $Django 前后端之 跨域问题(同源策略) vue项目(axios跨域请求数据)

    1 跨域问题(多个域之间的数据访问) #同源策略(ip port 协议全部相同) #本站的只能请求本站域名的数据 #CORS实现(跨域资源共享) #实现CORS通信的关键是服务器.只要服务器实现了CO ...

随机推荐

  1. angularcli 第六篇(todolist 列表)

    1.通过文本框输入,向数组添加数据 <!-- 通过文本框输入,向数组添加数据 push --> <input type="text" name="111 ...

  2. beta版本——第七次冲刺

    第七次冲刺 (1)SCRUM部分☁️ 成员描述: 姓名 李星晨 完成了哪个任务 编写个人信息修改界面的js 花了多少时间 3h 还剩余多少时间 0h 遇到什么困难 密码验证部分出现问题 这两天解决的进 ...

  3. windows查看文件MD5值的命令

    今天需要,就记录一下. certutil -hashfile filename MD5 certutil -hashfile filename SHA1 certutil -hashfile file ...

  4. Python 爬虫js加密破解(四) 360云盘登录password加密

    登录链接:https://yunpan.360.cn/mindex/login 这是一个md5 加密算法,直接使用 md5加密即可实现 本文讲解的是如何抠出js,运行代码 第一部:抓包 如图 第二步: ...

  5. EasyUI之dataGrid的行内编辑

    $(function () { var datagrid; //定义全局变量datagrid var editRow = undefined; //定义全局变量:当前编辑的行 datagrid = T ...

  6. 决策树——ID3

    参考网址:https://www.cnblogs.com/further-further-further/p/9429257.html ID3算法 最优决策树生成 -- coding: utf-8 - ...

  7. (1)WIFI信号确定距离

    https://blog.csdn.net/PINGER0077/article/details/79482238 ESP8266不需要修改任何库 #include "ESP8266WiFi ...

  8. [Web] Adaptive loading

    There is pretty good talk about performacne https://www.youtube.com/watch?v=puUPpVrIRkc It targets t ...

  9. rhcsa备战笔记

    笔记全部手打 转载请加原文链接 0)重置密码开机按e 找到linux16行 rd.break console=tty0  ctrl+xmount -o remount,rw /sysrootchroo ...

  10. Java 用Jackson进行json和object之间的转换(并解决json中存在新增多余字段的问题)

    1.添加jackson库 如果是maven工程,需要在pom.xml中添加jackson的依赖: <dependency>      <groupId>com.fasterxm ...