axios封装--在项目文件很多时

1、封装意义

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

2、封装

在src下创建api文件夹，在里面创建http.js文件(可随意)

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

3、使用

创建 api.js文件，将整个项目的接口请求 放在这一个文件中，方便管理查看

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

export const user_data_get = p=> axios_get('app01/user/', p)

在自己的vue中导入我们定义的接口方法

<template>
   
  <div>
    <table>
      <tr>
        <td>姓名</td>
        <td>年龄</td>
        <td>家乡</td>
        <td>角色</td>
        <td>身高</td>
        <td>班级</td>
      </tr>
      <tr v-for="item in data_list" :key="item.id">
        <td>{{ item.username }}</td>
        <td>{{ item.age }}</td>
        <td>{{ item.home }}</td>
        <td>
          <p v-for="i in item.roles" :key="i.id">{{ i.role_name }}</p>
        </td>
        <td>{{ item.hight }}</td>
        <td>{{ item.classrooms.class_name }}</td>
      </tr>
    </table>
    <div>
      <button v-if="previous" @click="get_data(cur_page-1)">
        上一页
      </button>
      <button
        v-for="num in num_page"
        :key="num"
        @click="get_data(num)"
      >
        {{ num }}
      </button>
      <button v-if="next" @click="get_data(cur_page+1)">
        下一页
      </button>
    </div>
     
  </div>
</template>

<script>
// 导⼊api.js中定义的 axios函数 
import {user_data_get} from '../api/api'
export default {
  data() {
    return {
      data_list: [],
      previous: null,
      next: "",
      count: "",
      cur_page: 1,
    }
  },
  methods: {
    get_data(page, flag) {
      this.cur_page = page
      // 直接使用导入的 axios函数， 有参数的话就要传入参数
      user_data_get({'page': page}).then(res=>{
        console.log(res)
        this.data_list = res.results;
        this.previous = res.previous;
        this.next = res.next;
        this.count = res.count;
      })
    },
  },
  created() {
    this.get_data(1)    
  },
  computed: {
    num_page() {
      var a = this.count / 3;
      var b = Math.ceil(a);
      return b;
    },
  },
};
</script>