import axios from 'axios'

axios.defaults.baseURL = 'http://127.0.0.1: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);

    }

  }

)

//封装axios

//封装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;

//将我们http.js中封装好的 get,post.put,delete 导过来

import {axios_get,axios_delete,axios_post,axios_put} from './http.js'

export const user_add = p => axios_post("/app02/user/", p) // 获取七⽜云token

<script>

  // 导入axios函数

  import {user_add} from '../api/api'

    export default {

      data(){

        return{

          username:'',

          age:'',

          home:'',

          hight:'',

          roles:'',

          classrooms:'',

        }

      },

      methods:{

        add(username){

          let data={

            "username":this.username,

            "age":this.age,

            "home":this.home,

            "hight":this.hight,

            "roles":[this.roles],

            "classrooms":this.classrooms

          }

          //直接使用导入的axios函数

          user_add(data).then(res=>{

            console.log(res)

            if(res.code==200){

              alert('添加成功')

              sessionStorage.setItem("username",username)

              this.$router.push({path:'/userdel'})

            }else {

              alert('添加失败')

            }

          }).catch(error=>{

            console.log(error)

          })

        }

      },

    }

</script>