关于Axios的二次封装

最新推荐文章于 2024-10-11 11:23:42 发布

ChocolateBar~

最新推荐文章于 2024-10-11 11:23:42 发布

阅读量697

点赞数

文章标签： Axois

本文链接：https://blog.csdn.net/qq_53061847/article/details/126852312

版权

本文介绍了如何在项目中对Axios进行二次封装，包括使用的关键API：创建axios实例、添加请求和响应拦截器。详细讲解了在request.js文件中配置拦截器以过滤不必要的返回参数，并设置全局headers。同时，提供了示例，展示如何引入qs和Element UI的$message进行参数格式化和请求提示。

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

一、API

在项目中对axios请求进行二次封装时，会使用到以下几个api

1、创建一个新的axios

  axios.create([config]) //创建一个新的axios

2、添加请求拦截器

axios.interceptors.request.use(config=>{}, error=>{})

3、添加相应拦截器

 axios.interceptors.response.use(response=>{}, error=>{})

二、创建请求request.js文件

// 二次封装 axios 的文件 request.js
import axios from "axios";
const service = axios.create({
  baseURL: '',
});
// 请求拦截器
service.interceptors.request.use(
  config => {},
  error => {}
);
// 响应拦截器
service.interceptors.response.use(
  response => {},
  error => {}
);
export default service;
 
 
// api 文件引入 request.js
import request from './request';
request({
    url: "/person/detail?id=" + id,
    method