axios拦截器

引言

• 使用axios发送ajax请求，如果不使用强大的拦截器，简直是太可惜了，axios拦截器分为请求拦截器和响应拦截器两种。接下来我们来看看咋定义这两种拦截器。以vue项目来说明

我的目录结构

• api.js文件 分装请求函数
• request.js文件 定义拦截器
  

定义拦截器 request.js

• 这里也可以不用创建axios的实例， 直接使用axios创建

 // axios的引入
 import axios from 'axios'

 // axios 的配置 创建axios的实例
 const request = axios.create({
    baseURL: 'http://192.168.43.124:7070',// 域名、端口
    timeout: 5000,  //请求超时时间
})

 // post请求 设置Content-Type
 request.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded'
 
 // 请求拦截
 request.interceptors.request.use(config =>{
    // 此时这里可以进行请求发送前的一些操作
    // 比如携带token信息 等
     return config
 }, error =>{
     // 如果发送请求的时间超过timeout的值，则会调用该函数
     // 我们也可以在该函数进行一些操作
     console.log('超时')
     return Promise.reject(error)
 })

 // 响应拦截
 request.interceptors.response.use(response => {
     // 当响应成功 可以对数据进行统一的操作
     return response
 }, error => {
     // 针对响应错误 统一处理
     return Promise.reject(error.response.data)
 })
 
 // 暴漏 
 export default request

分装请求函数 api.js

• 这里可根据自己的实际情况去定义

 import request from './request.js'
 
 // get请求
 export const initData = params =>{
     return request({
         url: '/init_data',
         method: 'get',
         params
     })
 }

 // post请求
 export const getData = data=>{
     return request({
         url: '/get_data',
         method: 'post',
         data
     })
 }

main.js文件

• 在Vue对象的原型链上添加该函数，子组件可通过this获取相应的请求函数

 // 获取initData函数
 import { initData, getData}  from './axios/api.js'
 Vue.prototype.initData = initData
 Vue.prototype.getData= getData

子组件

 <script>
    data:{
        return {}
    },
    methods:{
       handleInit(){
            this.initData({
                // 请求参数
            }).then(res =>{
                console.log(res)
            })
       }
    }
 </script>