【vue3 | axios】封装拦截器，请求接口

最新推荐文章于 2024-07-30 10:48:53 发布

①条咸鱼

最新推荐文章于 2024-07-30 10:48:53 发布

阅读量294

点赞数

文章标签： javascript vue.js 前端

本文链接：https://blog.csdn.net/C_hydar/article/details/123894250

版权

文章讲述了在Vue.js项目中如何安装axios库，配置.env文件以设定API基础URL，以及在vue.config.js中设置跨域代理。接着介绍了在request.js中添加请求和响应拦截器的步骤，用于处理请求和响应的错误。最后展示了在main.js中引入并全局注册axios实例和服务端URL。

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

有错误欢迎评论指正~

安装 axios

npm install axios

拦截器配置

1、根目录新增三个文件：

.env.development：开发环境会引用这个文件里面的配置–serve
.env.production：生产环境–build
.env.test：测试环境

// .env.development / .env.production / .env.test
VUE_APP_BASE_URL = "http://请求api的地址"

取值方式：process.env.VUE_APP_BASE_URL

2、vue.config.js 设置跨域 proxy：

// vue.config.js
const { defineConfig } = require("@vue/cli-service");
module.exports = defineConfig({
  transpileDependencies: true,
  lintOnSave: false, // 关闭 eslint 检查
  devServer: {
    proxy: process.env.VUE_APP_BASE_URL,	// 配置跨域
  }
});

3、新增 request.js 文件配置拦截器

// request.js
import axios from "axios";

// 创建axios实例
let service: any = {};
service = axios.create({
    baseURL: process.env.VUE_APP_BASE_URL, // api的base_url
    timeout: 50000 // 请求超时时间
  });

// request拦截器 axios的一些配置
service.interceptors.request.use(
  (config: any) => {
    return config;
  },
  (error: any) => {
    // Do something with request error
    console.error("error:", error); // for debug
    Promise.reject(error);
  }
);

// respone拦截器 axios的一些配置
service.interceptors.response.use(
  (response: any) => {
    return response;
  },
  (error: any) => {
    console.error("error:" + error); // for debug
    return Promise.reject(error);
  }
);

export default service;

// api.js
export const api:object = {
	propName: "/a/b/c"
}

export default api;

引用

main.js

// main.ts
import service from './utils/request'
import api from './config/api'

app.config.globalProperties.$https = service;
app.config.globalProperties.$urls = api;