当前位置：首页 > 综合 >
vue2封装axios接口代码 环球观察
来源：腾讯云    时间：2023-04-06 14:19: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) => {      });

上一篇：四川：安全生产清单制厘清“四个责任”让事故风险防范能力显著提升

下一篇：最后一页

X 关闭

推荐内容

精彩推荐

Copyright ©  2015-2023 今日卫浴网版权所有  备案号：沪ICP备2023005074号-40   联系邮箱：5 85 59 73 @qq.com