axios 后端拿不到参数的处理-白红宇

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

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

post与get请求参数的处理

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

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

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

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

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

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

咳咳咳

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

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

万事总有个开头:

// request.jsimport 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;})// ...复制代码

这里主要是引入了qs这个模块对post的参数进行处理，后端接收的参数就能成功根据ContentType的类型正确解释参数了

对参数的处理，其实可以做更多的展开，不过这一个也基本满足日常需要了