axios 재 봉인, axios 차단기

4968 단어 vueaxios
axios.js:
세 조각 으로 나 누 기: 기본 설정, 요청 하기 전에 차단, 응답 하기 전에 차단
/**
 * http  
 */
//   axios  element ui  loading message  
import axios from "axios";
import qs from "qs";
import { Message } from "element-ui";
import router from "../../index.js";//       

const Axios = axios.create({
  baseURL: "https://api.xxxxxx.com", //   URL
  timeout: 10000,
  responseType: "json",
  withCredentials: true, //      cookie  
  headers: {
    //   "Content-Type": "application/x-www-form-urlencoded;charset=utf-8"
    "Content-Type": "application/json;charset=utf-8"
  }
});

//POST     (       )
Axios.interceptors.request.use(
  config => {
    //            
    if (config.method === "post") {
      //    
      // config.data = qs.stringify(config.data);
      // config.data = JSON.stringify(config.data);
      //     ,             json   ,     qs      
    }

    //       token ,       token
    //        ,    cookie     ,       ,          localstorage    
    // if (localStorage.token) {
    //   config.headers.Authorization = localStorage.token;
    // }
    return config;
  },
  error => {
    // error      ,       
    Message({
      showClose: true,
      message: error,
      type: "warning"
    });
    return Promise.reject(error);
  }
);

//      (       )
Axios.interceptors.response.use(
  res => {
    //        
    // if (res.data && !res.data.success) {
    //   return Promise.reject(res.data.error);
    // }

    return res;
  },
  error => {
    // console.log(error);
    if (error.data) {
      switch (error.data.code) {
        case 401:
          //    401   token          
          // store.commit("del_token");
          router.push({
            path: "/login",
            query: {
              redirect: router.currentRoute.fullPath
            }
          });
          break;
       
      }
    }
    //                 ,     ,token,     
    //    localStorage  sessionStorage
    // if (!window.localStorage.getItem("token")) {
    //   //                      ,       
    //   this.$router.push({
    //     path: "/login"
    //   });
    // } else {
    //   //            ,           ,                 
    //   //              
    //   let lifeTime =
    //     JSON.parse(window.localStorage.getItem("token")).lifeTime * 1000;
    //   let nowTime = new Date().getTime(); //         
    //   console.log(nowTime, lifeTime);
    //   console.log(nowTime > lifeTime);
    //   if (nowTime > lifeTime) {
    //     Message({
    //       showClose: true,
    //       message: "        ,     ",
    //       type: "error"
    //     });
    //     this.$router.push({
    //       path: "/login"
    //     });
    //   } else {
    //     //         satus ,           ,             
    //     // if (error.response.status === 403) {
    //     //     this.$router.push({
    //     //         path: "/error/403"
    //     //     });
    //     // }
    //     // if (error.response.status === 500) {
    //     //     this.$router.push({
    //     //         path: "/error/500"
    //     //     });
    //     // }
    //     // if (error.response.status === 502) {
    //     //     this.$router.push({
    //     //         path: "/error/502"
    //     //     });
    //     // }
    //     // if (error.response.status === 404) {
    //     //     this.$router.push({
    //     //         path: "/error/404"
    //     //     });
    //     // }
    //   }
    // }
    //    response       
    // let errorInfo = error.data.error ? error.data.error.message : error.data;
    // return Promise.reject(errorInfo);error.response.data
    return Promise.reject(error);
  }
);

//  axios          plugin ,   Vue.use(xxxx)
export default {
  install: function(Vue, Option) {
    Object.defineProperty(Vue.prototype, "$http", { value: Axios });
  }
};

 
main.js:
//         axios:this.$http
import packedAxios from "./axios";
Vue.use(packedAxios); //  this.$http      axios

 
aaa.vue:  get 요청 시작

      var url = "/getgoodlist";
      this.$http
        .get(url, { params: { shop_code: 126 } })
        .then(res => {
          console.log(res.data);
        })
        .catch(error => {
          console.log(error);
        });

 
bbb.vue: post 요청 시작
        var url="/saveusermsg"
        var msg={name:'xiaoming',password:'123456'}
        this.$http
            .post(url, msg)
            .then(res => {
              console.log(res.data);
            })
            .catch(error => {
              console.log(error);
            });

 
더 자세 한 내용 은 이동 하 십시오: 비교적 상세 한 포장
첨부: axios 2 차 패키지

좋은 웹페이지 즐겨찾기