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

axios的前端封装

作者头像
Tom2Code
发布2022-11-21 12:12:26
5290
发布2022-11-21 12:12:26
举报
文章被收录于专栏:Tom

在vue项目中,大家一般都会频繁的使用axios发起请求。

那我们索性把axios封装成一个我们自己的工具类,

使用起来就会很方便

新建js文件 名为request.js

第一步 导入依赖

代码语言:javascript
复制
import axios from 'axios'
import { Message, MessageBox } from 'element-ui'
import store from '../store'
import { getToken } from '@/utils/auth'

第二步 创建axios实例

代码语言:javascript
复制
// 创建axios实例
const service = axios.create({
  baseURL: process.env.BASE_API, // api 的 base_url
  timeout: 5000 // 请求超时时间
})

第三步 request拦截器

代码语言:javascript
复制
// request拦截器
service.interceptors.request.use(
  config => {
    if (store.getters.token) {
      config.headers['X-Token'] = getToken() // 让每个请求携带自定义token 请根据实际情况自行修改
    }
    return config
  },
  error => {
    // Do something with request error
    console.log(error) // for debug
    Promise.reject(error)
  }
)
代码语言:javascript
复制
// response 拦截器
service.interceptors.response.use(
  response => {
    /**
     * code为非20000是报错 可结合自己业务进行修改
     */
    const res = response.data
    if (res.code !== 20000) {
      Message({
        message: res.message,
        type: 'error',
        duration: 5 * 1000
      })

      // 50008:非法的token; 50012:其他客户端登录了;  50014:Token 过期了;
      if (res.code === 50008 || res.code === 50012 || res.code === 50014) {
        MessageBox.confirm(
          '你已被登出,可以取消继续留在该页面,或者重新登录',
          '确定登出',
          {
            confirmButtonText: '重新登录',
            cancelButtonText: '取消',
            type: 'warning'
          }
        ).then(() => {
          store.dispatch('FedLogOut').then(() => {
            location.reload() // 为了重新实例化vue-router对象 避免bug
          })
        })
      }
      return Promise.reject('error')
    } else {
      return response.data
    }
  },
  error => {
    console.log('err' + error) // for debug
    Message({
      message: error.message,
      type: 'error',
      duration: 5 * 1000
    })
    return Promise.reject(error)
  }
)

最后 暴露模块

代码语言:javascript
复制
export default service

然后在各种api中 我们可以这样直接使用:

代码语言:javascript
复制
import request from "@/utils/request";

export default {
   //添加小节
  addVideo(video){
    return request({
      url:'/eduservice/video/addVideo',
      method:'post',
      data:video
    })
  },
  // 删除小节
  deleteVideo(videoId){
    return request({
      url:'/eduservice/video/'+videoId,
      method:'delete'
    })
  }
}
本文参与 腾讯云自媒体同步曝光计划,分享自微信公众号。
原始发表:2022-07-26,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 Tom的小院 微信公众号,前往查看

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

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

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