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

vue2封装axios接口代码

原创
作者头像
肥晨
发布2023-04-04 14:28:34
4160
发布2023-04-04 14:28:34
举报
文章被收录于专栏:农民工前端

@toc

在/utils新建request

代码语言:shell
复制
import axios from 'axios'
import bus from '@/utils/bus'
import {Message} from 'element-ui'

const service = axios.create({
  baseURL: process.env.VUE_APP_BASE_API, // url = base url + request url
  // baseURL: '/api', // url = base url + request url
  timeout: 100000, // request timeout
})

service.interceptors.request.use(
  config => {
    let currentUser = JSON.parse(sessionStorage.getItem("UserInfo"))
    if (currentUser && currentUser.token) {
      config.headers['Authorization'] = 'token ' + currentUser.token
    }
    return config
  },
  error => {
    console.log(error)
    return Promise.reject(error)
  }
)

// response interceptor
service.interceptors.response.use(
  response => {
    return response
  },
  error => {
    const res = error.response.data
    const status = error.response.status
    if (status >= 500) {
        Message.error('服务繁忙请稍后再试')
    } else if (status >= 400) {
      if (res.status === 401) {
        Message.warning("您的账号登录已失效, 请重新登录")
        bus.$emit('logout')
      } else {
        Message.error("未知错误")
        console.error(error)
      }
    }
    return Promise.resolve(error)
  }
)
export default service

接口js页面中

代码语言:shell
复制
// 卡片管理模块
import request from '@/utils/request'


// get
export function getList(params) {
  return request({
    url: '/',
    method: 'get',
    params
  })
}


// POST
export function postList(data) {
  return request({
    url: '/',
    method: 'POST',
    responseType: "arraybuffer",
    data
  })
}

vue页面

代码语言:shell
复制
//引入
import {
  getList,
  postList
} from "@/api/comparison.js";



//使用
 getList().then((res) => {
      });

原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。

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

原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。

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

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 在/utils新建request
  • 接口js页面中
  • vue页面
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档