首页 > 其他分享> 文章详细

辉太郎看前端(vue脚手架axios封装拦截器)

2020-12-04 13:58:55 阅读：96 来源： 互联网

标签：axios vue Server json 拦截器 import

前言

1.拦截器的概念
2.拦截器分几个拦截点
3.下载axios的指令
4.axios的引入
5.axios的使用

拦截器的概念

axios拦截器发送出去请求或者数据响应回来赋值之前进行数据的拦截或者过滤。

拦截器的拦截点

1.请求拦截器
2.响应拦截器

`axios`的下载命令

npm install axios -S
cnpm install axios -S

注：使用-S会让axios出现在vue脚手架package.json中

`axios`的引入

1.不使用拦截器的情况

import axios from 'axios'
Vue.prototype.$axios = axios

2.使用拦截器的情况

import axios from '@/http/index' //配置拦截器文件的路径
Vue.prototype.$axios = axios

注：以上代码都是在main.js中使用的场景，需要挂载到vue的原型上。

3.配置拦截器

1.在src目录新建文件夹http。
2.在新建的文件夹下新建js文件

import axios from 'axios'  //引入axios
//创建axios的实例
let Server = axios.create({
    baseURL: "",//初始化路径
    timeout: 3000
})
//请求拦截器
Server.interceptors.request.use(config => {
    return config
})

//响应拦截器
Server.interceptors.response.use(response => {
    return response.data
})
//导出axios实例
export default Server

注：在响应拦截器返回时，可以根据情况返回一个data，或者不返回。

`axios`的使用

this.$axios.get('').then(res=>{})

注：请求方式可以按照需求而定。在使用本地json时，如果在public中时，在请求方式中/json名，在assets中时，按照路径方式用./来引入即可。

标签：axios,vue,Server,json,拦截器,import
来源： https://blog.csdn.net/m0_50512274/article/details/110631845

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9