二次封装axios

二次封装axios

根据我自己喜好进行轻量封装。

代码语言：javascript复制

import axios from 'axios';
import { Notify } from 'vant';

axios.defaults.timeout = 5000
axios.defaults.baseURL = process.env.VUE_APP_BASE_API
axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded;charset=UTF-8'

const getToken = () => {
  if (sessionStorage.getItem("_token") && sessionStorage.getItem("_token") != "") {
    return sessionStorage.getItem("_token");
  } else {
    return '';
  }
}

// http request拦截器，给所有请求带上token
axios.interceptors.request.use(
  config => {
    if (!config.headers.Authorization) {
      config.headers.Authorization = getToken();
    }
    return config;
  }, err => {
    return Promise.resolve(err);
  }
);

axios.interceptors.response.use(
  response => {
    return response;
  },
  error => {
    if (error.response) {
      switch (error.response.status) {
        case 401:
          sessionStorage.clear();
          setTimeout(() => {
            window.location.href = '/login';
            Notify({ type: 'danger', message: error.response.data });
          }, 1000)
      }
    }
    return Promise.reject(error.response.data);
  }
)

const http = {
  get(url: any, params: any = {}, headers: any = {}) {
    return new Promise((resolve, reject) => {
      axios.get(url, {
        params: params,
        headers: headers
      })
        .then(res => {
          resolve(res);
        })
        .catch(err => {
          reject(err);
        })
    })
  },

  post(url: any, data: any = {}, headers: any = {}) {
    return new Promise((resolve, reject) => {
      axios.post(url, data, { headers })
        .then(res => {
          resolve(res);
        }, err => {
          reject(err);
        })
    })
  },

  put(url: any, data: any = {}, headers: any = {}) {
    return new Promise((resolve, reject) => {
      axios.put(url, data, { headers })
        .then(res => {
          resolve(res);
        }, err => {
          reject(err);
        })
    })
  },

  delete(url: any, data: any = {}) {
    return new Promise((resolve, reject) => {
      axios.delete(url, { data: data })
        .then(res => {
          resolve(res);
        }, err => {
          reject(err);
        })
    })
  }
}

export { http }

代码语言：javascript复制

const api = {
  index: {
    url: '/index'
  },

  login: {
    url: '/login'
  },

  regist: {
    url: '/regist'
  },

  category: {
    url: '/category'
  },

  archives: {
    url: '/archives'
  },

  sms: {
    url: '/sms'
  },

  sts: {
    url: '/cos/sts'
  }
};

export { api }

代码语言：javascript复制

import { getCurrentInstance } from "vue";

const { proxy }: any = getCurrentInstance();

proxy.$http.post(proxy.$api.login.url, {
  phone: val.phone,
  pwd: proxy.$crypto.MD5(val.pwd).toString(),
})
  .then((res: any) => {
  if (res.data.code === 1 && res.data.data.ticket != "") {
    saveToken(res);
  } else if (res.data.code === 0) {
    proxy.$notify({ type: "danger", message: res.data.msg });
  }
})
  .catch((err: any) => {
  proxy.$notify({ type: "danger", message: "系统错误" });
});

axios

0 人点赞