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 ; // ⼀定要导出函数

浏览器的同源策略 ：⾮同源的⻚⾯之间，⽆法获取数据

同源⼀般只⼀下三个东⻄相同：

协议相同

域名相同

端⼝相同

同源策略的⽬的： 是为了保证⽤户信息的安全，防⽌恶意的⽹站窃取数据。

同源策略的解决办法 ：

jsonp

CORS

代理解决跨域

⽗⼦组件的调⽤：

Import 导⼊⼦组件

compants 注册⼦组件

注册的⼦组件当做标签来使⽤

⼦组件给⽗组件传参：

⽗组件⾥的⼦标签⾥写上要传递的数据 （：⼦组件的参数名字 = ⽗组件的参数名字）

在⼦组件⾥注册参数（ pros ）

使⽤⽗组件传过来的参数

⽗组件给⼦组件传参：

⼦组件⾥先⽤特定的⽅法来把数据传递给⽗组件（ this.$emit(" ⽅法的名字 " ，要传递的数据 )

<template>
    <div>
<h1>子组件 </h1>
<button @click="btn">向父组件传值</button>
    </div>
</template>

<script>
import father from './father'
import axios from 'axios'
export default {
   
    data() {
        return {
lis:'小鬼'
        }
    },
    methods: {
btn:function(){
    this.$emit('event1',this.lis)
}
    },
    created() {

    }
}
</script>

<style scoped>

</style>

 

⽗组件的⼦标签⾥来接收数据（ @ ⼦组件的⽅法 = ⽗组件的⽅法）

 

 

在 methods ⾥接收传过来的 val 并赋值。

<template>
    <div>
{{lis1}} <br>
{{lis2}}
<son @event1='change($event)' ></son>
    </div>
</template>

<script>
import son from './son'
import axios from 'axios'
export default {
components:{
'son':son
},
    data() {
        return {
lis1:"我是你老子",
lis2:''
        }
    },
    methods: {
change(data){
    this.lis2=data
}
    },
    created() {

    }
}
</script>

<style scoped>

</style>