Vue3+vite搭建基础架构(4)--- 使用axios

Vue3+vite搭建基础架构(4)--- 使用axios

  • 说明
  • 官方文档
  • 安装axios
    • 安装命令
  • 使用axios
    • 测试参数以对象形式传参
    • 测试参数在url地址后面拼接传参

说明

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

官方文档

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

安装axios

根据官网给的命令
Vue3+vite搭建基础架构(4)--- 使用axios_第1张图片

安装命令

npm install axios --save

在webstorm里面的Terminal输入npm install axios --save命令安装该依赖。执行完如下:
Vue3+vite搭建基础架构(4)--- 使用axios_第2张图片
package.json会增加axios版本号
Vue3+vite搭建基础架构(4)--- 使用axios_第3张图片

使用axios

在src目录下的utils文件夹创建一个request.js文件:
Vue3+vite搭建基础架构(4)--- 使用axios_第4张图片
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

在src目录下创建一个api文件夹,用来存放每个模块的接口请求,假设有一个登录页面模块,那就把这个登录页面的接口都写到这个js文件里面即可,如下:
Vue3+vite搭建基础架构(4)--- 使用axios_第5张图片
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
  })
}

测试参数以对象形式传参

axios使用如下:
Vue3+vite搭建基础架构(4)--- 使用axios_第6张图片

浏览器效果:
接口请求:
Vue3+vite搭建基础架构(4)--- 使用axios_第7张图片
参数也是对象也是正确的:
Vue3+vite搭建基础架构(4)--- 使用axios_第8张图片
控制台会报错正常。
Vue3+vite搭建基础架构(4)--- 使用axios_第9张图片

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

将login改为test方法即可
Vue3+vite搭建基础架构(4)--- 使用axios_第10张图片
浏览器接口如下:
参数在url后面正常拼接,没有问题。
Vue3+vite搭建基础架构(4)--- 使用axios_第11张图片
参数如下:
Vue3+vite搭建基础架构(4)--- 使用axios_第12张图片
到这里axios使用示例就结束了,只需要根据具体的项目需要在request.js增加对应的认证就能正常使用。

你可能感兴趣的:(前端,vue,vue.js,javascript,html5,前端)