前端小白笔记(二)---axios封装

·  阅读 224

axios封装

导入

import axios from 'axios'
import { message } from 'elemrnt-ui'
复制代码

统一请求地址

axios.defaults.baseURL = "(可填写接口相同的部分)"
复制代码

请求时间限制

axios.defaults.timeout = 10000

请求拦截器

axios.interceptors.request.use(request => {
  let token = localStorage.getItem('token');//获取localStorage储存的token
  if (token) {// 判断是否存在token,如果存在的话,则每个http header都加上token
    request.headers.token = token;
  }
  
  return request
}, error => {
  message.error({ message: '请求失败!' });
  return Promise.reject(error)
})
复制代码

响应拦截器

axios.interceptors.response.use(response => {
  if (response.headers.token) { // 判断token是否存在,如果存在说明需要更新token
    localStorage.setItem('token', response.headers.token); // 覆盖原来的token(默认一天刷新一次)
  }
  if (response.status === 200) {
    //判断状态码,执行相应操作
  }
  return response
}, error => {
  message.error("请求错误或超时")
  return Promise.reject(error)
})
复制代码

导出

export default axios
复制代码
分类:
前端
标签:
收藏成功!
已添加到「」, 点击更改