axios 后端拿不到参数的处理

最新推荐文章于 2022-06-22 11:21:34 发布

weixin_33874713

最新推荐文章于 2022-06-22 11:21:34 发布

阅读量417

点赞数

文章标签：后端 java postman

原文链接：https://juejin.im/post/5c6cc8385188256261129c67

版权

这里主要想说说常见的，后台拿不到参数的问题:

用axios创建一个服务（实例方法）
post与get请求参数的处理
请求发出前的拦截,后台拿不到参数怎么破

ajax库千万个，为什么要选axios?

这个问题就像一个人问你，为什么你会选择你的先男（女）朋友？这个问题我是拒绝回答的，毕竟我是个苦逼的单身狗...

网上有很多争论，比如选择react、vue还是angular，我也看了很多这些文章，可能很多人都回答，小孩子才做选择，我们的目标是全都有！

对于这三都没接触过的同学，我建议从vue入手，其实我不带偏见的，选react或者angular也是可以的，但是作为一个过来人（称不上老司机，对自身技术能力不满意）来说，熟悉其中一个框架，都能找到工作（其实只有你js基础好,基础不好，就看你运气、简历写得好坏或口才了），不要对网上说哪个框架性能好什么的就选谁（精力充足的请忽略这句话），刚开始选定一个就足够了，前端发展太快了，说不定谁陪你到最后，和现在的框架好好过日子就好了，即使因为某种原因不得不换一个框架，对你来说也有很多好处，各个框架都有很多可以互相借鉴的地方，发现这一点，对自身发展也是有好处的

好了，扯远了，言归正传（脑子里总有那么多想法，面对喜欢的女孩子的时候，嘴也有那么多想法就好了，不会经常尬聊，不小心把天聊死）...

咳咳咳

在开发中，为了统一管理和对参数、请求过程发生的错误的处理，我们常常定义这样的一个request.js文件

用axios创建一个服务（实例方法）

万事总有个开头:

// request.js

import axios from 'axios'

// 定义一个常量，就是我们用于请求的服务了
const service = axios.create({
  // 简单理解就是请求的前缀  
  baseURL: '/api/',
  // 默认为post或get
  method: 'post',
  headers: {
    // 该属性需要和后台协商或者值为  'application/x-www-form-urlencoded ; charset=UTF-8'
    // 这里也是可能后台拿不到参数的原因（后面会说）
    'Content-Type': 'application/json; charset=UTF-8',
  },
  data: {
    usename: 'Jenny'，
    country: 'Chinese'
  },
  // 指定请求超时的毫秒数(0 表示无超时时间)
  timeout: 1000 * 60 * 5,
})

exprot default function request (requestConfig) {
  return service(requestConfig)
}

复制代码

现在就简单创建好一个服务了，比如在a.js中使用这个方法:

import sendRequest from './request'

sendRequest({
  // 可不写，已默认为post
  method: 'post',
  data: {
    usermame: 'Jenny',
  },
  // 如果是get的方法
  // 参数就不是data二是params：
  // params: {
  //    usermame: 'Jenny',
  // }
})

复制代码

post与get请求参数的处理

因为一些请求方面的参数用data，有的用params，这样就不符合统一管理的原则了，所以我们在调用的时候，统一把参数作为body这个字段来使用，在request.js里面处理就好，所以我们要处理

首先在上面创建的服务之前，写这样一个方法来判断什么时候将参数的body转换为data或者params:

// 方法接收一个字符类型的参数，值为请求的方法，判断是否是post等请求，返回Boolean值
const isPostSeries = (method = 'post') => {
  const requestMethod = method.toLowerCase()
  return requestMethod === 'post' || requestMethod === 'put' || requestMethod === 'patch'
}

// ...

// 改写这里：
export default function request (requestConfig) {
  // 调用的参数都是body的形式了
  const body = requestConfig.body
  const method = requestConfig.method
  const usePramasKeys = isPostSeries(method)
  // 合并处理参数-如果是post就是 data， 否则params
  // Object.assign这个方法，您需要百度了解一下？
  const newRequestConfig = Object.assign(requestConfig, 
  usePramasKeys ? { data: body } : { params: body }
  )
  // 最后把多余的body删除掉
  delete combineParams.body
  return service(newRequestConfig)
}

复制代码

然后，现在a.js中使用这个方法:

import sendRequest from './request'

sendRequest({
  method: 'post',
  // 参数直接写body就好了，这样就不会忘记该用data还是params了吧s
  body: {
    usermame: 'Jenny',
  },
})

复制代码

这样就简单处理好了

请求发出前的拦截,后台拿不到参数怎么破

请求拦截

axios创建实例后，如上面定义的常量service就会有一个属性interceptors(直译为拦截器), 该属性下也有一些属性，以为对数进行拦截，比如有request和respose, 顾名思义是对请求和响应的拦截，响应的拦截就是可以对响应值等做一些处理（根据自身的特点）, 我这里主要讲后台拿不到参数的原因，所以讲请求的拦截：所以创建axios实例完成以后：

// 首先可能用到一个模块（需要自行安装）:
import Qs from 'qs';

// ...

service.interceptors.request.use(config => {
  // 上面提到contentType是后台拿不到参数的一个因素(常见的)
  const contentType = config.headers['Content-Type'];

  // 如果后台接收的contentType值为application/x-www-form-urlencoded 而不是上面默认的 application/json
  // 且为post的请求，要引入qs模块对参数的处理：
  if (isPostSeries(config.method)) {
    config.data = Qs.stringify(config.data)
  }

  // 必须把config给返回出去，这是请求的一些参数，配置，必须的
  return config;
})

// ...
复制代码