axios封装

封装的意义

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

封装

// 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[‘ContentType’]=‘application/json’;
 axios.defaults.headers.put[‘ContentType’]=‘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⽅法$