axios拦截器

2022-02-27 22:30:57 阅读：194 来源： 互联网

标签：username axios Son msg 拦截器组件 data

axios拦截器(需要背诵)#

首先安装axios, npm i axios

对ajax请求进行拦截
1. 在请求头添加token
对ajax响应数据进行拦截
1. 统一处理请求失败的情况, 这样就不需要在每个组件里处理失败的情况
2. 有些接口需要登录才能访问, 在没登录的情况下跳转到登录页面

/**
 * 配置axios的拦截器
 */  
let env = 'prod';  //dev开发, test测试, prod生产
let baseURL;
if(env === 'dev') {
    baseURL = 'http://localhost:3003';
} else if (env === 'test') {
    baseURL = 'http://test.huruqing.cn:3003';
} else {
    baseURL = 'http://huruqing.cn:3003';
} 

import axios from 'axios'; 
const service = axios.create({
    baseURL,
    timeout: 30000
}) 

// 配置请求拦截
service.interceptors.request.use((config) => { 
    console.log(config);
    // 添加token
    // config.headers["token"] = "gg12j3h4ghj2g134kj1g234gh12jh34k12h34g12kjh34kh1g";
      return config;
    },
    (error) => {
       alert('发送请求失败')
    }
); 

// 配置响应拦截
service.interceptors.response.use(
    (res) => {
       if (res.data.code == 666) {
        return res.data;
       } else {
            alert(res.data.msg);
       }
    },
    (error) => { 
      alert("网络异常,请稍后再试");
    }
);  

const get = (url,data) => {
    return service.get(url,{params:data});
} 

export default {
    ...service,
    get
};

(八) 父子组件通信(背诵)#

知识点(背诵):

父传子: 父组件通过(绑定)属性的方式传数据给子组件, 子组件使用props接收数据
子传父: 父组件在子组件上绑定一个自定义事件, 子组件通过$emit触发该自定义事件, 同时可以传入数据

1.父传子#

父组件给子组件绑定属性, 属性的值是需要传递的信息
子组件通过props接收父组件的信息

 // 例子1: 使用普通属性
// demo.vue
<template>
  <div>
    <h3>父组件</h3>
    <hr />
    <Son msg="hello world" username="张三"/>
  </div>
</template>

<script>
import Son from "./Son";
export default {
  components: {
    Son,
  },
};
</script> 

// Son.vue
<template>
  <div>
    <h4>子组件</h4>
    <p>msg: {{ msg }}</p>
    <p>username: {{ username }}</p>
  </div>
</template>

<script>
export default {
  props: ["msg", "username"],
};
</script> 

// 例子2: 使用绑定属性(可传变量)
// demo.vue
<template>
  <div>
    <h3>父组件</h3>
    <hr />
    <Son :msg="msg" :username="username" />
  </div>
</template>

<script>
import Son from "./Son";
export default {
  components: {
    Son,
  },
  data() {
    return {
        msg: '哈哈哈',
        username: '李四'
    };
  },
};
</script> 

// Son.vue
<template>
  <div>
    <h4>子组件</h4>
    <p>msg: {{ msg }}</p>
    <p>username: {{ username }}</p>
  </div>
</template>

<script>
export default {
  props: ["msg", "username"],
};
</script>

父传子实践: 把首页拆分为多个组件技巧: 如果某个部分只是做展示用, 尽量把它变成子组件

2. 子传父#

父组件在子组件上绑定一个自定义事件(事件名称我们自己定义的, vue本身是没有这个事件的)
父组件给自定义事件绑定一个函数, 这个函数可以接受来自子组件的数据
子组件使用$emit触发(调用)该事件, 并把数据以参数形式传给父组件

// 例子1: 一个简单的例子
// demo.vue
<template>
  <div>
    <h3>父组件</h3>
    <hr />
    <Son @aaa="say"/>
  </div>
</template>

<script>
import Son from "./Son";
export default {
  components: {
    Son,
  },
  data() {
    return { 
    };
  },
  methods: {
    say(data) {
      alert(data)
    }
  }

};
</script> 

// 子组件
<template>
  <div>
    <h4>子组件</h4>
    <button @click="$emit('aaa','我是子组件')">点击</button>
  </div>
</template>

<script>
export default {
  props: ["msg", "username"],
};
</script>

标签：username,axios,Son,msg,拦截器,组件,data
来源： https://blog.csdn.net/weixin_45838066/article/details/123171886

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

ICode9

axios拦截器

axios拦截器(需要背诵)#

(八) 父子组件通信(背诵)#