axios的使用方法

---

title: axios的使用方法
tags:

• vite
• vue3
  abbrlink: 952eae24
  date: 2024-04-19 20:46:15

---

将axios引入到相关的包

引入相关的包到axios.js文件中;或者一些比较大点的项目都会有自己的公共文件,在src中名叫utils里面会有一个request.js文件用来处理相关的axios请求。

import axios from 'axios'

创建axios实例

一般创建的方法

const service = axios.creat({
    baseURL:"http://....."
})

高级创建方法

const service = axios.creat({
    //axios中请求配置有baseURL选项。表示请求URL公共部分
    //代码可能会有多种环境，在不同的开发环境下，会有不同的路径
    //如代码在.env.development开发环境或 .env.production生产文件中
    //这种方法可以让Vite进行环境管理，让VITE_APP_BASE_API在不同环境下具有不同的值
    baseURL:import.meta.env.VITE_APP_BASE_API,
    //超时
    timeout:20000
})

注意：.env.XXX文件中，会写VITE_APP_BASE_API的具体名字，但是他是一个地址对象，不是单纯的地址，要找地址的话还要去，vite.config.js文件中去看具体怎么定义的，一般在server：{}中

建立相关api存储文件

在src文件夹下建立一个名叫api的文件夹来存放接口数据，然后会定义一个方法来定义相关的操作，如果是登录功能就会写login.js文件。

在api文件中引入包

若axios被引入的地方是axios.js文件中，则在api文件夹中的login.js文件引入

import axios from '~/axiso'

若是在utils的request.js文件中，则在api文件夹中的login.js文件引入

import request from '@/utils/request'