axios拦截器

axios拦截器(需要背诵)#

首先安装axios, npm i axios

1. 对ajax请求进行拦截
   1. 在请求头添加token
2. 对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
};

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

知识点(背诵):

1. 父传子: 父组件通过(绑定)属性的方式传数据给子组件, 子组件使用props接收数据
2. 子传父: 父组件在子组件上绑定一个自定义事件, 子组件通过$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. 子传父#

1. 父组件在子组件上绑定一个自定义事件(事件名称我们自己定义的, vue本身是没有这个事件的)
2. 父组件给自定义事件绑定一个函数, 这个函数可以接受来自子组件的数据
3. 子组件使用$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>