Vue3+vite搭建基础架构（4）--- 使用axios_vue3 vite axios

说明

这里记录下自己在Vue3+vite的项目使用axios请求后端接口的过程，不使用ts语法，方便以后直接使用。这里承接自己的博客Vue3+vite搭建基础架构（3）— 使用dayjs这篇博客，在该博客项目的基础上增加使用axios。

官方文档

axios官方文档：http://axios-js.com/zh-cn/docs/

安装axios

根据官网给的命令

安装命令

npm install axios --save
1

在webstorm里面的Terminal输入npm install axios --save命令安装该依赖。执行完如下:

package.json会增加axios版本号

使用axios

在src目录下的utils文件夹创建一个request.js文件:

request.js代码,该代码只是一个示例代码，需要根据自己的项目需要做实际调整：

//引入axios请求
import axios from 'axios'
//引入element-plus里面的消息提示
import { ElMessage } from 'element-plus'

const BASE_API=""
// 创建axios实例
const service = axios.create({
  baseURL: BASE_API, //所有的后端接口请求地址前缀部分(没有后端请求不用写)
  timeout: 15000 // 请求超时时间,这里15秒
  //withCredentials: true,// 异步请求携带cookie,true为携带,false为不携带
  //请求头里面设置通用传参类型
  /*headers: {
    //设置后端需要的传参类型
    'Content-Type': 'application/json',
    'token': 'x-auth-token',//一开始就要token
    'X-Requested-With': 'XMLHttpRequest',
  }*/
})

// request拦截器
service.interceptors.request.use(config => {
  /*if (store.getters.token) {
    config.headers['Authorization'] = getToken() // 让每个请求携带自定义token 请根据实际情况自行修改
  }*/
  return config
}, error => {
  console.log(error)
  Promise.reject(error)
})

// response拦截器
service.interceptors.response.use(
    response => {
      //对数据返回做什么
      return response.data
    },
    error => {
      console.log('err' + error)
      ElMessage({
        message: error.message,
        type: 'error',
        duration: 3 * 1000
      })
      return Promise.reject(error)
    }
)

export default service
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49

在src目录下创建一个api文件夹，用来存放每个模块的接口请求，假设有一个登录页面模块，那就把这个登录页面的接口都写到这个js文件里面即可，如下:

login.js代码如下:

import request from '@/utils/request'

//示例以application/json格式传参
export function login(data) {
  return request({
    url: '/admin/login',
    method: 'post',
    data: data
  })
}

//示例在url后面拼接参数传参
export function test(params) {
  return request({
    url: '/admin/login',
    method: 'post',
    params: params
  })
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

测试参数以对象形式传参

axios使用如下:

浏览器效果:
接口请求：

参数也是对象也是正确的:

控制台会报错正常。

测试参数在url地址后面拼接传参

将login改为test方法即可

浏览器接口如下:
参数在url后面正常拼接，没有问题。

参数如下：

到这里axios使用示例就结束了，只需要根据具体的项目需要在request.js增加对应的认证就能正常使用。