参考文章:

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. nginx的stream模块和upstream模块

    nginx7层调度方式 使用upstream模块定义集群名称和节点地址 定义在server字段之外httpd字段之内 upstream staticweb { server 172.17.0.2; # ...

  2. k8s部署etcd集群

    1.k8s部署高可用etcd集群时遇到了一些麻烦,这个是自己其中一个etcd的配置文件 例如: [Unit] Description=Etcd Server After=network.target ...

  3. xpath+多进程爬取网易云音乐热歌榜。

    用到的工具,外链转换工具 网易云网站直接打开源代码里面并没有对应的歌曲信息,需要对url做处理, 查看网站源代码路径:发现把里面的#号去掉会显示所有内容, 右键打开的源代码路径:view-source ...

  4. C# 获取操作系统空闲时间

    获取系统鼠标和键盘没有任何操作的空闲时间 public class CheckComputerFreeState { /// <summary> /// 创建结构体用于返回捕获时间 /// ...

  5. c#中的new和override的实例

    using System; using System.Collections.Generic; using System.Linq; using System.Text; /* 简单说,抽象方法是需要 ...

  6. Vue --- 指令练习

    scores = [ { name: 'Bob', math: 97, chinese: 89, english: 67 }, { name: 'Tom', math: 67, chinese: 52 ...

  7. [Javascript] Use requestIdleCallback to schedule JavaScript tasks at an optimal time

    JavaScript is single-threaded, which can present some problems when creating an interactive user exp ...

  8. WinDbg常用命令系列---显示引用的内存(dda、ddp、ddu、dpa、dpp、dpu、dqa、dqp、dqu)

    命令dda, ddp, ddu, dpa, dpp, dpu, dqa, dqp, 和 dqu在指定位置显示指针,取消对该指针的引用,然后以各种格式显示结果位置的内存. ddp [Options] [ ...

  9. 移动端ios针对input虚拟键盘挡住的问题

    写移动端的时候发现input的虚拟键盘对Ios的手机不是很友好 我的是苹果6 点击的时候经常会挡住input框 针对这个问题找了很多发现都没效果 最后发现用下面这段js就可以解决了 $("i ...

  10. nginx配置ssl加密(单/双向认证、部分https)

    nginx下配置ssl本来是很简单的,无论是去认证中心买SSL安全证书还是自签署证书,但最近公司OA的一个需求,得以有个机会实际折腾一番.一开始采用的是全站加密,所有访问http:80的请求强制转换( ...