1. 封装

axios.js

import axios from 'axios'
import {
baseURL
} from '@/config'
class HttpRequest {
constructor (baseURL = baseURL) {
this.baseURL = baseURL
this.queue = {} // 队列中有请求时 显示loadong界面, 反之同理
}
getInsideConfig () {
const config = {
baseURL: this.baseURL,
header: {
//
}
}
return config
}
// 全局响应拦截器
interceptors (instance, url) {
instance.interceptors.request.use(config => { // 请求拦截器
// 添加全局的loading...
// Spin.show() ---遮罩组件
// 队列中有请求时 显示loadong界面, 反之同理
if (!Object.keys(this.queue).length) {
// Spin.show()
}
this.queue[url] = true
console.log(config)
/*
* {adapter: ƒ, transformRequest: {…}, * transformResponse: {…}, timeout: 0, xsrfCookieName: * "XSRF-TOKEN", …}
* adapter: ƒ xhrAdapter(config)
* baseURL: undefined
* data: undefined
* header: {}
* maxContentLength: -1
* method: "get"
* timeout: 0
* transformRequest: {0: ƒ}
* transformResponse: {0: ƒ}
* url: "/userinfo"
* validateStatus: ƒ validateStatus(status)
* xsrfCookieName: "XSRF-TOKEN"
* xsrfHeaderName: "X-XSRF-TOKEN"
* __proto__: Object
*/
return config
}, error => {
return Promise.reject(error)
}) instance.interceptors.response.use(res => { // 响应拦截器, res为服务端返回数据
delete this.queue[url]
console.log(res)
/*
* {data: {…}, status: 200, statusText: "OK", headers: {…}, config: {…}, …}
* config: {adapter: ƒ, transformRequest: {…}, transformResponse: {…}, timeout: 0, xsrfCookieName: "XSRF-TOKEN", …}
* data: {code: 1, msg: "请先登陆"}
* headers: {date: "Wed, 29 May 2019 17:14:59 GMT", etag: "W/"1f-DqVJ3VSipebpjnlLj9vGsYkCMOw"", x-powered-by: "Express", content-length: "31", content-type: * "application/json; charset=utf-8"}
* request: XMLHttpRequest {onreadystatechange: ƒ, readyState: 4, timeout: 0, withCredentials: false, upload: XMLHttpRequestUpload, …}
* status: 200
* statusText: "OK"
* __proto__: Object
*/
const {
data,
status
} = res
return {
data,
status
}
}, error => {
delete this.queue[url]
return Promise.reject(error)
})
}
request (options) {
console.log(options) // {url: "/userinfo", method: "get"}
const instance = axios.create() // 合并为一个对象, 如果有相同的key值 后者覆盖前者
options = Object.assign(this.getInsideConfig(), options)
this.interceptors(instance, options.url)
return instance(options)
}
} export default HttpRequest

api/index.js

import HttpRequest from '@/lib/axios'
const axios = new HttpRequest()
export default axios
  1. 使用

    • 创建发送请求的api
    • user.js

import axios from './index'
export const getUserInfo = ({ userId }) => {
return axios.request({
url: '/userinfo',
method: 'post',
data: {
userId: userId
}
})
}
- 在页面中引入使用
- home.vue
<template>
<div>
<h1>home page</h1>
</div>
</template>
<script>
import { getUserInfo } from '@/api/user';
export default {
mounted () {
this.getInfo()
},
methods: {
getInfo () {
getUserInfo({ userId: 21 }).then(res => {
console.log(res)
})
}
}
}
</script>

Vue axios封装 实现请求响应拦截的更多相关文章

  1. vue中使用axios与axios的请求响应拦截

    VUE中使用Axios axios的安装 npm install axios vue-axios axios在vue的配置与使用 在main.js中引入axios和vue-axios import a ...

  2. vue axios请求/响应拦截器

    // main.js中配置 // 引入 axios import Axios from 'axios' // 这时候如果在其它的组件中,是无法使用 axios 命令的. // 但如果将 axios 改 ...

  3. axios请求响应拦截器的应用

    什么是axios拦截器? 一般在使用axios时,会用到拦截器的功能,一般分为两种:请求拦截器.响应拦截器. 请求拦截器在请求发送前进行必要操作处理 例如添加统一cookie.请求体加验证.设置请求头 ...

  4. vue+axios 对restful 请求封装

    礼拜天来公司整理项目,项目是最近开始重构的,里面的各种http请求接口是restful结构的(为了提升项目的比格),整理一下笔记 [restful介绍][1]博主讲的很详细 技术栈: vue + vu ...

  5. vue axios封装以及登录token过期跳转问题

    Axios配置JWT/封装插件/发送表单数据 首先请务必已仔细阅读 Axios 文档并熟悉 JWT: 中文文档 JWT 中文文档 安装 npm install axios npm install es ...

  6. vue axios 封装(二)

    封装二: http.js import axios from 'axios' import storeHelper from './localstorageHelper' // 全局设置 const ...

  7. vue Axios 封装与配置项

    import axios from "axios"; import qs from "qs"; import { Message } from "el ...

  8. vue axios配置 发起请求加载loading请求结束关闭loading

    axios带有请求拦截器,避免在每个请求里面加loading重复操作,可以封装进去,在请求开始时加载loading层,请求结束关闭,loading层用vux的loading加载 axios.js im ...

  9. vue axios封装

    前言: 对第三方库进行二次封装和抽离到统一模块,项目面对自己的模块进行开发.如果有一天更换库,只需要修改自己模块中的代码,无需对整个项目进行重构. 将axios网络请求库封装到network文件下的r ...

随机推荐

  1. 记一次mysql数据库被勒索(下)

    背景: nextcloud的mysql数据库被黑,删库勒索.参考:记一次mysql数据库被勒索(上) mysql数据库恢复成功,nextcloud还是无法连接.参考:记一次mysql数据库被勒索(中) ...

  2. Linux系统中有趣的命令(可以玩小游戏)

    Linux系统中有趣的命令(可以玩小游戏) 前言 最近,我在看一些关于Linux系统的内容,这里面的内容是真的越学越枯燥,果然学习的过程还是不容易的.记得前几个月初学Linux时,有时候就会碰到小彩蛋 ...

  3. Scala中的函数高级使用

    1.偏函数 1.基本介绍 在对符合某个条件,而不是所有情况进行逻辑操作时,使用偏函数是一个不错的选择 将包在大括号内的一组case语句封装为函数,我们称之为偏函数,它只对会作用于指定类型的参数或指定范 ...

  4. 5.SSH 免密码登陆

    SSH 免密码登陆 serverA 机器上 userA 用户,想要免密钥登陆到serverB机器上 1.集群中的所有机器 安装ssh 服务端sudo apt-get updatesudo apt-ge ...

  5. 高德地图marker事件监听-高德地图marker绑定事件就执行了[解决立即执行]

    官方的demo是这样的:地址:[http://lbs.amap.com/api/javascript-api/example/infowindow/add-infowindows-to-multipl ...

  6. linux下udev和mdev的使用

    linux下设备文件系统有devfs.udev和mdev这三种. 一.devfs devfs是由Linux 2.4内核引入的,引入时被许多工程师给予了高度评价,它的出现使得设备驱动程序能自主地管理自己 ...

  7. idea使用技巧一常用快捷键

    快捷键 功能 ctrl+x 删除行 ctrl+d 复制行 ctrl+n 查找类 ctrl+f 查找文本 ctrl+j 自动代码 ctrl+h 显示类结构图 ctrl+q 显示注释文档 ctrl+p 方 ...

  8. day03 每日一行

    day03 每日一行 问题描述 用列表解释式 .生成器表达式实现 字典列表为: [{'first': 'john', 'last': 'smith', 'email': 'jsmith@exsampl ...

  9. 【转载】pandas常用函数

    原文链接:https://www.cnblogs.com/rexyan/p/7975707.html 一.import语句 import pandas as pd import numpy as np ...

  10. 【小白学PyTorch】5 torchvision预训练模型与数据集全览

    文章来自:微信公众号[机器学习炼丹术].一个ai专业研究生的个人学习分享公众号 文章目录: 目录 torchvision 1 torchvision.datssets 2 torchvision.mo ...