当前位置 :首页 > 资讯 >正文

vue2封装axios接口代码

2023-04-04 22:41:15 来源：腾讯云


(资料图片仅供参考)

@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) => {      });

标签：

为您推荐

新闻快讯