Home > Web Front-end > JS Tutorial > Problem with post request parameter passing when vue handles axios

Problem with post request parameter passing when vue handles axios

php中世界最好的语言
Release: 2018-03-28 14:04:06
Original
2460 people have browsed it

This time I will bring you the problem of passing parameters when vue handles axios post request . What are the precautions when vue handles axios? The following is a practical case , let’s take a look.

Many friends will definitely use axios requests when using vue, including now that vux already comes with axios, and its usage is also very simple. The documentation is relatively clear, but when we use post submission However, I found that sometimes the problem of parameters not being sent to the server occurs. I remember that the document also mentioned the occurrence of this situation. Here I record the settings so that they can be used directly when needed next time. No need to dig through old code.

The following is how to use it in vux. It is very simple. Just place the code in main.js. If you only use vue and install axios directly, the setting method will be the same and will not be recorded.

import qs from 'qs'
import es6Promise from 'es6-promise'
import { AjaxPlugin } from 'vux'
Vue.use(AjaxPlugin)
AjaxPlugin.$http.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded'
// POST传参序列化(添加请求拦截器)
AjaxPlugin.$http.interceptors.request.use((config) => {
 // 发送请求之前做某件事
 if (config.method === 'post') {
  config.data = qs.stringify(config.data)
 }
 return config
}, (error) => {
 return error
})
Copy after login

Note: is placed in front of new Vue({})

I believe you have mastered the method after reading the case in this article, more exciting Please pay attention to other related articles on php Chinese website!

Recommended reading:

How to use CORS of the Koa2 framework to complete cross-domain ajax requests

method and computed in Vue the difference

The above is the detailed content of Problem with post request parameter passing when vue handles axios. For more information, please follow other related articles on the PHP Chinese website!

Related labels:
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template