在vue项目中配置axios工具类

最新推荐文章于 2024-05-08 17:53:35 发布

钟良堂

最新推荐文章于 2024-05-08 17:53:35 发布

阅读量468

点赞数

分类专栏：笔记文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/elsa001/article/details/129477975

版权

笔记专栏收录该内容

75 篇文章 11 订阅

订阅专栏

文章介绍了如何在Vue项目中创建一个axios工具类，以便复用请求配置。通过在utils/http.js文件中设置基础URL、超时时间及请求头，包括从localStorage获取并设置token信息，然后在其他组件中导入这个工具类进行HTTP请求，简化了每次请求时的配置步骤。

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

在我们使用axios来发起请求时，每次都需要将配置信息写在每一个请求体中，我感觉很麻烦，于是我直接在vue项目中使用axios工具类来复用这些请求体。
在vue项目中的工程目录下新建utils/http.js文件：

// 导入axios
import axios from 'axios'

// 从localStorage里面获取登录时保存的token信息
let TOKENINFO = localStorage.getItem('user_token')
TOKENINFO = TOKENINFO.substring(1, TOKENINFO.length - 1)

// 配置axios工具类
const service = axios.create({
  // 基础URL
  baseURL: 'http://localhost:8081',
  // 请求超时
  timeout: 5000,
  // 请求头headers信息，保存请求token信息
  headers: {
    token: TOKENINFO
  }
})

// 导出service
export default service

这个文件放在其他地方也可以，到时候导入的时候知道在哪里就行。
下面在其他页面的目录下，直接导入这个js文件：
在这里插入图片描述

import service from '../../utils/http.js'

以后，每次请求时，我们只需要使用service来请求即可，不需要额外进行其他配置：

  service.get('restaurant/list', {

  })
    .catch(error => {
      console.log(error)
    })
    .then(res => {
      console.log(res)
    })
    
      service
        .post('order', {
          oId: '22',
          mId: '2',
          cId: '1',
          mName: '韭菜',
          moNum: '3',
          moPrice: '5'
        })
        .catch(error => {
          console.log(error)
        })
        .then(res => {
          console.log(res)
        })