axios二次封装请求拦截响应拦截 | 适用于H5中后台

哎，新项目，0-1开始写，前后台需要封装好多工具……

1.步骤

src根目录下面新建api文件夹，新建request.js文件

2.步骤

request.js引入

import axios from 'axios'
import router from '@/router'
import { Notify } from 'vant'
import { getToken } from '../utils/token'

const http = axios.create({
  baseURL: 'http://api.paozha.net',
  timeout: '20000'
})

// 添加请求拦截器
http.interceptors.request.use(function (config) {
  if (getToken()?.length > 0 && config.headers.Authorization === undefined) {
    config.headers.Authorization = `Bearer ${getToken()}`
  }
  // 在发送请求之前做些什么
  return config
}, function (error) {
  // 对请求错误做些什么
  return Promise.reject(error)
})

// 添加响应拦截器
http.interceptors.response.use(function (response) {
  // 对响应数据做点什么
  return response
}, function (error) {
  // 对响应错误做点什么
  console.dir(error)
  Notify({ type: 'danger', message: '请先登录！' })
  if (error.response.status === 401) {
    router.push('/login')
  }
  return Promise.reject(error)
})

export default ({ url, method = 'GET', params = {}, data = {}, headers = {} }) => {
  return http({
    url,
    method,
    params,
    data,
    headers
  })
}

3.步骤

api文件夹下新建index.js文件

引入requerst.js

import http from './request.js'

// 登录
export const getLogin = ({ mobile, code }) => http({
  url: '/v1_0/authorizations',
  method: 'POST',
  data: {
    mobile,
    code
  }
})

4.步骤

页面引入请求即可

  methods: {
    async onSubmit (values) {
      console.log('submit', values)
      this.isloading = true
      try {
        const res = await getLogin(this.user)
        console.log(res)
        Notify({ type: 'success', message: '登录成功' })
        setToken(res.data.data.token) // 存储token
        this.$router.push('/layout/home')
      } catch (err) {
        Notify({ type: 'danger', message: '账号或密码错误' })
        console(err)
      }
      this.isloading = false
    }
  }

根据自己需求配置哦：具体可参考文档http://www.axios-js.com/zh-cn/docs/