参考文章:

  1. https://www.cnblogs.com/qiuchuanji/p/10048805.html
  1. https://www.cnblogs.com/XHappyness/p/9993878.html

代码示例:

  1. import axios from 'axios'
  2.  
  3. // 创建一个axios实例
  4. const service = axios.create({
  5. // headers: {
  6. // 'content-type': 'application/json;charset=UTF-8',
  7. // 'token': 'one'
  8. // },
  9. baseURL: 'http://dianphp.fyz.com',
  10. withCredentials: true,
  11. timeout: 5000
  12. })
  13.  
  14. // 添加请求拦截器
  15. service.interceptors.request.use(config => {
  16. // 在发送请求之前做某事,比如说 设置token
  17. // config.headers['token'] = 'token';
  18. config.headers['X-Token'] = 'xxxxxxxxxxxxxxxxxxx';
  19. return config;
  20. }, error => {
  21. // 请求错误时做些事
  22. return Promise.reject(error);
  23. });
  24.  
  25. // 添加响应拦截器
  26. service.interceptors.response.use(response => {
  27. const res = response.data;
  28. // 如果返回的状态不是200 就主动报错
  29. if(res.state != 200){
  30. return Promise.reject(res.message || 'error')
  31. }
  32. return response;
  33. }, error => {
  34. return Promise.reject(error.response.data); // 返回接口返回的错误信息
  35. })
  36.  
  37. 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. 2020秋招嵌入式面经——地平线、小米、CVTE、大华、绿米

    地平线提前批 一面凉: 投递简历过程:官网投递9月份之前投的都是提前批,投了北京.上海.南京地区的嵌入式软件研发岗,北京和上海的都被筛掉了,南京的捞了我,hr小姐姐打电话邀约面试. 一面凉: 电话面试 ...

  2. Docker镜像管理基础篇

    Docker镜像管理基础篇 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 一.Docker Images Docker镜像还有启动容器所需要的文件系统及其内容,因此,其用于创建并启 ...

  3. Windows与Linux之间海量文件的传输与Linux下大小写敏感问题

    Windows与Linux之间海量文件的传输与Linux下大小写敏感问题 mount.cifs 支持通过网络文件系统挂载,不过需要安装cifs-utils,也可通过mount -t cifs挂载,详细 ...

  4. K8s基本概念入门

    序言 没等到风来,绵绵小雨,所以写个随笔,聊聊k8s的基本概念. k8s是一个编排容器的工具,其实也是管理应用的全生命周期的一个工具,从创建应用,应用的部署,应用提供服务,扩容缩容应用,应用更新,都非 ...

  5. ThinkPHP模板之二

    模板布局及变量比较,循环. controller <?php /** * Created by PhpStorm. * User: Sahara * Date: 2019/6/23 * Time ...

  6. 微服务:springboot与swagger2的集成

    现在测试都提倡自动化测试,那我们作为后台的开发人员,也得进步下啊,以前用postman来测试后台接口,那个麻烦啊,一个字母输错就导致测试失败,现在swagger的出现可谓是拯救了这些开发人员,便捷之处 ...

  7. 在inux中安装redis的时候,会出现下面的这个异常

    是因为没有安装c++的编译器 安装c++的编译器: yum -y install gcc-c++ 然后再使用命令执行make就可以了 ,如果你遇到这个错误以后,一定要先将redis的解压包删掉以后,再 ...

  8. DT系统研究之-自定义新建函数

    说说在destoon中,我们二次开发时新建的函数应该放哪里好? 发现部分同学,在学习研究destoon过程中,新建的一些php函数直接放在模块里面,须知这样放置的话,会产生些不良后果. 首先,新建的该 ...

  9. HDU - 5823:color II (状压DP 反演DP)

    题意:给定连通图,求出连通图的所有子图的颜色数. 一个图的颜色数,指最少的颜色数,给图染色,使得有边相邻的点之间颜色不同. 思路:首先想法是DFS枚举,然后计算颜色,发现对于给定图,求颜色不会求? 毕 ...

  10. Java 第12次作业--你的生日

    题目:计算自己的出生日期距今天多少天,再将自己的出生日期利用SimpleDateFormat类设定的格式输出显示. 代码: import java.util.*; import java.text.* ...