脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript类库 → vue.js → vue优雅使用axios

vue项目实战之优雅使用axios

 更新时间：2022年02月11日 10:04:52   作者：一定会去到彩虹海的麦当  
axios是一个基于promise的HTTP库,可以用在浏览器和 node.js 中,下面这篇文章主要给大家介绍了关于vue项目实战之优雅使用axios的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下

axios传参

params与data传参

  • params 传参：参数以 k=v&k=v 格式放置在 url 中传递。

springboot后端可以使用@RequestParam注解接受请求，或者保证参数名跟k一样时也可以接收到

只要是使用params传参，无论是post请求还是get请求都是拼接都url中，此时的post请求也只是伪post请求

  • data传参：参数被放在请求体中。

后端必须使用@RequestBody来接收，否则会接收不到，因为axios默认传递的参数类型是application/json，会将其转成json格式。

举例：

vue中：

export function login(account, password, orgType) {
  return request({
    url: '/webapi/login',
    method: 'post',
    data: {"loginId":account,"password":password,"orgType":orgType}
)}

则会转成json格式放入请求体中

如果后端中想这样接收，是接收不到的，因为此时后端的接收格式是application/x-www-form-urlencoded

@PostMapping(value = "/login")
public Result login(String loginId, String password, int orgType, HttpServletResponse response){
}

如果我们使用data传参，但后端不想使用@RequesBody的方式来接收，那怎么处理呢？

首先要设置请求头

headers: {
    //关键
    'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8'
}

直接拼接成k=v

适用参数较少的情况

export function login(account, password, orgType) {return request({
    url: '/webapi/login',
    method: 'post',
    data: "loginId="+account+ "&password="+password+"&orgType="+orgType
  })
}

使用qs实现 json 对象的 k=v 格式化

适用参数较多的情况

安装qs ： npm install qs

import qs form 'qs'

export function login(account, password, orgType) {
  return request({
    url: '/webapi/login',
    method: 'post',
    data: qs.stringify({"loginId":account, "password":password,"orgType":orgType})
  })
}

这样后端就可以这样接收了：

@PostMapping(value = "/login")
public Result login(String loginId, String password, int orgType, HttpServletResponse response){
}

封装axios

设置request拦截器，可以在这里添加token，这样每次发起请求时都会携带token了

设置响应拦截器，根据后端的状态码进行相应处理，比如但发现token失效后，就跳转到登录页面等

import axios from 'axios'
import { Notification, MessageBox, Message } from 'element-ui'
import store from '@/store'
import { getToken } from '@/utils/auth'
import errorCode from '@/utils/errorCode'

axios.defaults.headers['Content-Type'] = 'application/json;charset=utf-8'
// 创建axios实例
const service = axios.create({
  // axios中请求配置有baseURL选项，表示请求URL公共部分
  baseURL: "http://localhost:8082",
  // 超时
  timeout: 10000
})
// request拦截器
service.interceptors.request.use(config => {
  // 是否需要设置 token
  const isToken = (config.headers || {}).isToken === false
  if (getToken() && !isToken) {
    config.headers['Authorization'] = 'Bearer ' + getToken() // 让每个请求携带自定义token 请根据实际情况自行修改
  }
  return config
}, error => {
    console.log(error)
    Promise.reject(error)
})

// 响应拦截器
service.interceptors.response.use(res => {
    // 未设置状态码则默认成功状态
    const code = res.data.code || 200;
    // 获取错误信息
    const msg = errorCode[code] || res.data.msg || errorCode['default']
    if (code === 401) {
      MessageBox.confirm('登录状态已过期，您可以继续留在该页面，或者重新登录', '系统提示', {
          confirmButtonText: '重新登录',
          cancelButtonText: '取消',
          type: 'warning'
        }
      ).then(() => {
        store.dispatch('LogOut').then(() => {
          location.href = '/index';
        })
      }).catch(() => {});
    } else if (code === 500) {
      Message({
        message: msg,
        type: 'error'
      })
      return Promise.reject(new Error(msg))
    } else if (code !== 200) {
      Notification.error({
        title: msg
      })
      return Promise.reject('error')
    } else {
      return res.data
    }
  },
  error => {
    console.log('err' + error)
    let { message } = error;
    if (message == "Network Error") {
      message = "后端接口连接异常";
    }
    else if (message.includes("timeout")) {
      message = "系统接口请求超时";
    }
    else if (message.includes("Request failed with status code")) {
      message = "系统接口" + message.substr(message.length - 3) + "异常";
    }
    Message({
      message: message,
      type: 'error',
      duration: 5 * 1000
    })
    return Promise.reject(error)
  }
)

export default service

使用

import request from './request'

export function apiLogin(data){
    return request({
        url:'/user/login',
        method:'post',
        data:data
    })
}

参考链接：https://www.jb51.net/article/237137.htm

总结

到此这篇关于vue项目实战之优雅使用axios的文章就介绍到这了,更多相关vue优雅使用axios内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

相关文章

  • 浅谈VUE项目打包后运行页面一片白问题

    浅谈VUE项目打包后运行页面一片白问题

    本文主要介绍了浅谈VUE项目打包后运行页面一片白问题，文中通过示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2023-01-01
  • 基于vue+echarts实现柱状图渐变色效果(每个柱子颜色不同)

    基于vue+echarts实现柱状图渐变色效果(每个柱子颜色不同)

    前段时间的vue项目中用到了echarts柱状图,由于UI设计稿中要求使用渐变色,并且每个柱子的颜色不同,于是做了一番研究,现将我的实现方案分享如下
    2024-05-05
  • element ui中el-form-item的属性rules的用法示例小结

    element ui中el-form-item的属性rules的用法示例小结

    这篇文章主要介绍了element ui中el-form-item的属性rules的用法,本文通过实例代码给大家介绍的非常详细,感兴趣的朋友一起看看吧
    2024-07-07
  • 前端VUE双语实现方案详细教程

    前端VUE双语实现方案详细教程

    在项目需求中我们会遇到国际化的中英文切换,这篇文章主要给大家介绍了关于前端VUE双语实现方案的相关资料,文中通过代码介绍的非常详细,需要的朋友可以参考下
    2024-08-08
  • Vue响应式添加、修改数组和对象的值

    Vue响应式添加、修改数组和对象的值

    有些时候，不得不想添加、修改数组和对象的值，但是直接添加、修改后又失去了getter、setter,由于JavaScript的限制， Vue不能检测以部分变动的数组
    2017-03-03
  • Vue自定义指令实现按钮级的权限控制的示例代码

    Vue自定义指令实现按钮级的权限控制的示例代码

    在Vue中可以通过自定义指令来实现按钮权限控制,本文主要介绍了Vue自定义指令实现按钮级的权限控制的示例代码,具有一定的参考价值,感兴趣的可以了解一下
    2024-05-05
  • Vue跑马灯marquee组件使用方法详解

    Vue跑马灯marquee组件使用方法详解

    这篇文章主要为大家详细介绍了Vue跑马灯marquee组件的使用方法，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2022-05-05
  • vue 使用el-table循环轮播数据列表的实现

    vue 使用el-table循环轮播数据列表的实现

    这篇文章主要介绍了vue 使用el-table循环轮播数据列表的实现方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
    2022-04-04
  • vue3.2新增指令v-memo的基本使用教程

    vue3.2新增指令v-memo的基本使用教程

    ue3.2新增了一个指令v-memo,引入这个指令的目的是帮助大家更好的为我们的应用做性能优化,下面这篇文章主要给大家介绍了关于vue3.2新增指令v-memo基本使用的相关资料,需要的朋友可以参考下
    2022-09-09
  • vue axios登录请求拦截器

    vue axios登录请求拦截器

    这篇文章主要介绍了vue axios登录请求拦截器，判断是否登录超时，或对请求结果做一个统一处理的教程详解,需要的朋友可以参考下
    2018-04-04

最新评论