有学有练才叫学习:学而不思则罔,思而不学则殆:学而不习,纸上谈兵,习而不进,画地为牢!

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

代码编程 cat 4个月前 (06-03) 51次浏览 已收录 0个评论 扫描二维码

哎,新项目,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/

喜欢 (0)
cat
关于作者:
发表我的评论
取消评论
表情 贴图 加粗 删除线 居中 斜体 签到

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址