看点：vue2封装axios接口代码

• 2023-04-06 16:39:05来源：腾讯云

(资料图)

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

复制

标签：

延伸阅读

推荐阅读

猜您喜欢