简易的封装axios,添加请求头

552 阅读1分钟

对axios做了一个简单的封装,还有很多不足,请各位指教

创建实例

const service = axios.create({
  baseURL: process.env.VUE_APP_BASE_API,
  tomeout: 5000,
  headers: { 'Content-Type': 'application/x-www-form-urlencoded;charset=UTF-8' },
  transformRequest: [function (data) {
    return qs.stringify(data)
  }]
})

响应拦截器

两个参数,请求成功要做的事情,请求失败需要做的处理

service.interceptors.response.use((response) => {
  console.log(response)
  const { data, status, info } = response.data
  if (status === 0) {
    return data
  } else {
    ElMessage.error('请求失败!')
    return Promise.reject(new Error(info))
  }
}, error => {
  error.response && ElMessage.error(error.response.data)
  return Promise.reject(new Error(error.response.data))
})

请求拦截器

在发送请求之前,将token添加到请求头上

service.interceptors.request.use(
  (config) => {
    config.headers['x-auth-token'] = localStorage.getItem('token')
    return config
  },
  (error) => {
    return Promise.reject(new Error(error))
  }
)