前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >二次封装axios

二次封装axios

作者头像
4O4
发布2022-04-25 16:48:28
2770
发布2022-04-25 16:48:28
举报
文章被收录于专栏:404404

二次封装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: "系统错误" });
});
本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2021-06-02 ,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 二次封装axios
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档