[项目经验]——vue优雅使用axios

文章目录

• • • axios传参
    • • params与data传参
    • 封装axios

axios传参

params与data传参

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

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

• 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){
  }
  

首先要设置请求头

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

1. 直接拼接成k=v

   适用参数较少的情况

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

2. 使用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.cnblogs.com/dw039/p/11104628.html