Axios封装与父 子组件

Vue的封装

封装的意义

• 提到代码的可读性
• 提高代码的可维护性
• 减少代码的书写

封装

// src/api/http.js

import axios from 'axios'
axios.defaults.baseURL = "http://127.0.0.1:8000/"
// axios.defaults.baseURL = "http://172.16.240.175/:8000/"

//全局设置网络超时
axios.defaults.timeout = 10000;

//设置请求头信息
axios.defaults.headers.post['Content-Type'] = 'application/json';
axios.defaults.headers.put['Content-Type'] = 'application/json';



axios.interceptors.request.use(
    config => {
        // 每次发送请求之前判断是否存在token，如果存在，则统一在http请求的header都加上token，不用每次请求都手动添加了
        const token = localStorage.getItem("token")
            // console.log(token)
        if (token) {
            config.headers.Authorization = 'JWT ' + token
        }
        return config;
    },
    error => {
        return Promise.error(error);
    })




axios.interceptors.response.use(
    // 请求成功
    // res => res.status === 200  ? Promise.resolve(res) : Promise.reject(res),
    res => {
        if (res){
            //加上201的原因是因为：modelviewset的post请求添加成功后返回的状态码是201
            if(res.status === 200 || res.status === 201){ 
                return Promise.resolve(res);
            }
            
            
        }
    },


    // 请求失败
    error => {
        if (error.response) {
            // 判断一下返回结果的status == 401？  ==401跳转登录页面。  ！=401passs
            // console.log(error.response)
            if (error.response.status === 401) {
                // 跳转不可以使用this.$router.push方法、
                // this.$router.push({path:'/login'})
                window.location.href = "http://127.0.0.1:8888/"
            } else {
                // errorHandle(response.status, response.data.message);
                return Promise.reject(error.response);
            }
            // 请求已发出，但是不在2xx的范围
        } else {
            // 处理断网的情况
            // eg:请求超时或断网时，更新state的network状态
            // network状态在app.vue中控制着一个全局的断网提示组件的显示隐藏
            // 关于断网组件中的刷新重新获取数据，会在断网组件中说明
            // store.commit('changeNetwork', false);
            return Promise.reject(error.response);
        }
    });


// 封装xiaos请求

// 封装get请求
export function axios_get(url, params) {
    return new Promise(
        (resolve, reject) => {
            axios.get(url, { params: params })
                .then(res => {
                    // console.log("封装信息的的res", res)
                    resolve(res.data)
                }).catch(err => {
                    reject(err.data)
                })
        }
    )
}

// 封装post请求
export function axios_post(url, data) {
    return new Promise(
        (resolve, reject) => {
            // console.log(data)
            axios.post(url, JSON.stringify(data))
                .then(res => {
                    // console.log("封装信息的的res", res)
                    resolve(res.data)
                }).catch(err => {
                    reject(err.data)
                })
        }
    )
}

// 封装put请求
export function axios_put(url, data) {
    return new Promise(
        (resolve, reject) => {
            // console.log(data)
            axios.put(url, JSON.stringify(data))
                .then(res => {
                    // console.log("封装信息的的res", res)
                    resolve(res.data)
                }).catch(err => {
                    reject(err.data)
                })
        }
    )
}

// 封装delete请求
export function axios_delete(url, data) {
    return new Promise(
        (resolve, reject) => {
            // console.log(data)
            axios.delete(url, { params: data })
                .then(res => {
                    // console.log("封装信息的的res", res)
                    resolve(res.data)
                }).catch(err => {
                    reject(err.data)
                })
        }
    )
}

export default axios;  //一定要导出函数

使用

// src/api/http.js


//将我们http.js中封装好的  get,post.put,delete  导过来
import { axios_get, axios_post, axios_delete, axios_put } from './http.js'

export const qn_token_get = p => axios_get("/oauth/qntoken/", p) // 获取七牛云token
export const section_add = p => axios_post("/course/section/", p) // 获取七牛云token

// src/components/qiniu.vue

<script>

//导入axios函数  
import {qn_token_get,section_add} from './axios_api/api'

methods: {
    changeFile(e){
    //   获取文件
      this.file = e.target.files[0];
    },
    gettoken(){
        //直接使用导入的axios函数
      data ={"home":"henan","age":78}
        qn_token_get().then(res=>{
          
          return this.token = res.data.uptoken
          console.log(this.token)
        })
    },
}

</script>

跨域请求

浏览器的同源策略：非同源的页面之间，无法获取数据

同源一般只一下三个东西相同：

• 协议相同
• 域名相同
• 端口相同

**同源策略的目的：**是为了保证用户信息的安全，防止恶意的网站窃取数据。

同源策略的解决办法：

• jsonp
• CORS
• 代理解决跨域

vue组件间通信

• 父组件

<template>
    <div>
        <!-- 展示子组件的内容 -->
        <!-- :后的时子组件里面接收的名字，=后面的是父组件的名字 -->
        <!-- @后面的是子组件里定义的名字，=是父组件里获取参数的名字 -->
       <zi1 :str="str" @change_fu="getzi" ></zi1>  
       <button @click="change_zi()">修改子组件的数据</button>
        {{data}}
       <!-- {{str}} -->
    </div>
</template>


<script>
import zi1 from './zi1'

export default {
    name:"fu1.vue",
    components:{zi1},

    data() {
        return {
           str:'',
           data:{}
        }
    },
    methods:{
        change_zi(){
            this.str = "老子让你，你就得干啥，谁让我是你爸爸"
            
        },
        getzi(val){
            console.log(val)
            this.data = val
            
        }
    }
}
</script>

• 子组件

<template>
    <div>
        <li>
            <ul>fghajkndlkajdakjd,大家上课方便那水库里，减法计算</ul>
            {{str}}
            <button @click="send_fu()">把数据传递给父组件</button>
        </li>
        

        
    </div>
</template>


<script>
export default {
    name:"zi1",
    props:["str"],
    data() {
        return {
            data:{"name":"PP"}
        }
    },
    
    methods:{
        send_fu(){
            console.log(this.data)
            this.$emit("change_fu",this.data)
        }
    }

}
</script>

父子组件的调用：

• Import 导入子组件
• compants注册子组件
• 注册的子组件当做标签来使用

父组件给子组件传参：

• 父组件里的子标签里写上要传递的数据 （：子组件的参数名字=父组件的参数名字）
• 在子组件里注册参数（props）
• 使用父组件传过来的参数

子组件给父组件传参：

• 子组件里先用特定的方法来把数据传递给父组件（ this.$emit(“方法的名字”，要传递的数据) ）
• 父组件的子标签里来接收数据（@子组件的方法 = 父组件的方法）
• 在methods里接收传过来的val并赋值。