Vue封装请求到一个js文件（vue2、vue3通用）

最新推荐文章于 2024-06-17 20:33:59 发布

爱写bug的小可

最新推荐文章于 2024-06-17 20:33:59 发布

阅读量616

点赞数 10

文章标签： javascript vue.js 前端

本文链接：https://blog.csdn.net/weixin_56654434/article/details/135510273

版权

本文介绍了如何在Vue项目中使用axios进行统一的API请求配置，包括设置基础URL、请求拦截器以及在不同版本Vue中导入和调用API的方法。

摘要由CSDN通过智能技术生成

首先在src目录下新建一个文件夹utils文件夹其中新建request.js文件

// 组件功能：负责统一导出一个配置后的 axios
// 1.导入 axios 模块
import axios from 'axios'
// 2 .配置 axios 模块
// 2.1. 配置基地址
axios.defaults.baseURL = 'http://127.0.0.1:8000/api/'

// 2.2 设置请求拦截器
// 请求在到达服务器之前，先会调用use中的这个回调函数来添加请求头信息
axios.interceptors.request.use(config => {
    // 为请求头对象，添加token验证的Authorization字段
    let token = window.sessionStorage.getItem("token");
    config.headers.Authorization = token;
    return config
})
// 
// 3.导出 axios 模块方法
export default axios

在src目录下新建api文件夹（具体请求的地址）代码示例

import axios from "@/utils/request.js";
const coures = {
   updateProductCode(data){
   return axios({
  url: '/product/updateByCode',
  method: 'post',
   data
   })
   },
getByproductListSearch(data) {
    return axios({
      url: '/product/search',
      method: 'post',
      data
    })
  }
}

在main.js文件中

//vue2
import api from './api/requestmain'
Vue.prototype.$api = api
//vue3 不需要配置

调用

//vue2 （示例）
 updateByUser() {
            let data = {
                id: this.user.id
            }
            this.$api.getUserById(data).then((res) => {
                
                this.user = res.data;
      
            })
        },
//vue3(示例)
import { userUpdate, userLogin } from "../api/requestmain";
const systemUserUpdate = async () => {
  let res = await userUpdate(updateInfo.value);
  if (res.data.code == 200) {
    ElMessage({
      type: "success",
      message: res.data.msg,
    });
  } else {
    ElMessage({
      type: "info",
      message: res.data.msg,
    });
  }
};