xios封装

封装的意义

1.提高代码可读性
2.提高代码可维护性
3.减少代码书写

封装

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>