配置axios请求实例对象，封装axios请求

最新推荐文章于 2025-03-24 09:51:18 发布

好菜的程序媛

最新推荐文章于 2025-03-24 09:51:18 发布

阅读量2.5k

点赞数

分类专栏： vue

本文链接：https://blog.youkuaiyun.com/Gomeer/article/details/89030650

版权

vue 专栏收录该内容

38 篇文章

订阅专栏

在Vue项目的src目录下，通过config/axios.js文件配置并封装axios请求实例。首先引入axios、vue和router，然后创建axios的实例，自定义配置。接着对axios进行封装，提供统一的请求方法。最后，在各个需要发起请求的模块中，引入并使用封装好的listOrder方法进行数据交互。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

src根目录下创建config/axios.js

1.引入axios，vue，router

import axios from 'axios'
import router from '../router'
import Vue from 'vue';

2.创建实例

使用自定义配置创建axios的新实例

const axiosInstance = axios.create({
    baseURL: 'http://schj/user/api',
    responseType: 'json',
    timeout: 50000,
});

3.封装axios请求

export function fetch(url, params,type) {
    return new Promise((resolve, reject) => {
        axiosInstance({
          method: 'post',
          url,
          data:params,
          responseType: type?'blob':'json',
      }).then(res => {
         resolve(res)
      }).catch(err => {
         reject(err)
      })
    })
}

4.使用封装的方法进行请求

import { fetch } from '../config/axios'

export function listOrder (params){
  return fetch('/schj/orders/list',params)
}

在需要请求的模块中引入 listOrder

import { listOrder } from '../../api/system'

listOrder(data).then(res => {
                
}).catch(err => {
           
});