首页 > 商业

vue2封装axios接口代码

来源:腾讯云 发表时间:2023-04-04 22:16:20
分享到


(资料图)

@toc

在/utils新建request

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 interceptorservice.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页面中

// 卡片管理模块import request from "@/utils/request"// getexport function getList(params) {  return request({    url: "/",    method: "get",    params  })}// POSTexport function postList(data) {  return request({    url: "/",    method: "POST",    responseType: "arraybuffer",    data  })}

vue页面

//引入import {  getList,  postList} from "@/api/comparison.js";//使用 getList().then((res) => {      });

关键词:

保安全、拿资格、抠细节 冬运中心全面进入北京冬奥会临战状态

2021-12-16

人民财评:稳步朝着实现共同富裕的目标迈进

2021-12-16

靠双手让日子变得更美好

2021-12-16

第一观察·瞬间 | 中俄元首视频会晤:相约北京见,携手向未来

2021-12-16

世卫组织:全球累计新冠确诊病例达270791973例

2021-12-16

他们为何奔向先行示范区——2021深圳全球招商大会透视

2021-12-16

Copyright   2015-2022 华中木材网 版权所有  备案号:京ICP备12018864号-26   联系邮箱:2 913 236 @qq.com