<script>
import axios from 'axios' export default {
name: 'hello',
data () {
return {
msg: 'Welcome to Your Vue.js App'
}
},
methods: {
getImg () {
axios.get('https://static.segmentfault.com/v-595f50ca/global/img/logo-b.svg')
.then((response) => {
console.log(response)
}).catch((error) => {
console.log(error)
})
},
addInterceptors () {
axios.interceptors.request.use(function (config) {
// Do something before request is sent
console.log('开始请求')
console.log(`请求地址: ${config.url}`)
return config
}, function (error) {
// Do something with request error
console.log('请求失败')
return Promise.reject(error)
})
axios.interceptors.response.use(function (config) {
// Do something before request is sent
console.log('接收响应')
return config
}, function (error) {
// Do something with request error
console.log('响应出错')
return Promise.reject(error)
})
}
},
mounted () {
this.addInterceptors()
this.getImg()
}
}
</script>

每天一点点之vue框架开发 - axios拦截器的使用的更多相关文章

  1. 每天一点点之vue框架开发 - axios解决跨越问题

    1.安装 npm install axios 或者 使用 bower: bower install axios 或者直接使用 cdn: <script src="https://unp ...

  2. 每天一点点之vue框架开发 - 引入Jquery

    1. 安装jquery npm install jquery --save-dev 2.在build/webpack.base.conf.js中添加如下内容 var webpack = require ...

  3. 每天一点点之vue框架开发 - 使用vue-router路由

    1.安装路由(安装过的跳过此步) // 进入项目根目录 cd frontend // 安装 npm install vue-router --save-dev 2.在入口文件main.js中引入路由 ...

  4. 每天一点点之vue框架开发 - vue坑-This relative module was not found

    94% asset optimization ERROR Failed to compile with 1 errors This relative module was not found: * . ...

  5. vue使用jsx/axios拦截器设置

    最害怕的就是做过的事情,转几天又忘记了:写过的代码,也模模糊糊不知道哪里去了,所以告诉自己最好把每天遇到的问题记录下来,好,开始. 新公司要搭个vue后台框架,所以用了简简单单的 vue+iview+ ...

  6. 每天一点点之vue框架开发 - 如何在一个页面调用另一个同级页面的方法

    使用场景: 页面分为header.home.footer三部分,需要在home中调用header中的方法,这两个没有相互引入 官方给出方法: api传送门 在项目中实现: 1.首先同一个vue实例来调 ...

  7. 每天一点点之vue框架开发 - vue-router路由在循环中携带参数

    场景:要实现一个标签云,通过循环把标签渲染,然后单击标签的时候实现跳转,跳转路由一样,通过唯一参数来实现请求不同的数据 因此,就需要在for循环中来携带参数,本节所讲的是路由使用对象的形式(别名)来实 ...

  8. 每天一点点之vue框架开发 - History 模式下线上路由报404错误

    vue-router 默认 hash 模式 —— 使用 URL 的 hash 来模拟一个完整的 URL,于是当 URL 改变时,页面不会重新加载. 如果不想要很丑的 hash,我们可以用路由的 his ...

  9. 每天一点点之vue框架开发 - 部署到线上

    1.在项目根目录下运行如下命令 npm run build 会生成一个dist目录, 2.然后将dist目录上传至服务器就可以访问页面了,不需要配置vue环境了.

随机推荐

  1. HDU 5523:Game

    Game  Time Limit: 2000/1000 MS (Java/Others)  Memory Limit: 131072/131072 K (Java/Others) 问题描述 XY在玩一 ...

  2. vim修改缩进问题

  3. 手机连接jmeter录制脚本测试

    1.准备条件 电脑安装好jmeter,准备好一个手机 注意: 电脑和手机连接的网络要一致 手机设置代理协议前要先进入想要抓取的网站: http://39.107.96.138:3000/ 2.jmet ...

  4. PHP mb_substr mbstring 函数

    定义和用法 mb_substr - 获取部分字符串 版本支持 PHP4 PHP5 PHP7 支持 支持 支持 5.4.8 length 传入 NULL,则从 start 提取到字符串的结尾处. 在之前 ...

  5. .NET via C#笔记12——泛型

    12 泛型 使用值类型作为参数的泛型容器,传入值类型的参数时,不需要进行装箱 12.1 FCL中的泛型 System.Array中提供了很多泛型方法 AsReadOnly BinarySearch C ...

  6. mqtt已断开连接(32109)

    在rabbitmq下使用mqtt协议时,如果服务质量(qos)设置为2,在发布服务时会出现[已断开连接 (32109) - java.io.EOFException]的报错. 出现该报错的其他情况还有 ...

  7. Docker安装,基本概念,执行流程,生命周期简介

    Docker基本概念 在使用Docker前,首先要先知道Docker中这几个常用的概念: 镜像:镜像是文件,只读的,提供了运行完整软硬件应用程序的集装箱. 容器:是镜像的实例,由Docker负责创建, ...

  8. CocosCreator - 向上传递事件(冒泡)

    /** *   分发事件到事件流中. *   this.node.dispatchEvent(new cc.Event.EventCustom("name",是否向上传递)) *  ...

  9. css快速浏览

    meta <meta charset="utf-8" /> <meta name="keywords" content="key1, ...

  10. 每天一点点之laravel框架开发 - API通过access_token获取用户id报 Unauthenticated. 错误(passport)

    1.首先保证你的config/auth.php 中 guards 的 api 的 driver 选项改为 passport 2.注册中间件,在 app/Http/Kernel.php 文件中的 $ro ...