Shulou(Shulou.com)06/02 Report--

This article mainly explains "what is the method of Vue+Axios request interface and how to pass parameters". The content of the explanation is simple and clear, and it is easy to learn and understand. now please follow the editor's train of thought to study and learn "what is the method of Vue+Axios request interface and how to pass parameters".

1. Get request:

The Get request is relatively simple. It is usually used to concatenate the parameters into the url or to connect them in the following way:

This.axios.get (this.getWxQyUserInfoUrl, {params: {agentid: this.doLoginParams.agentid,code: this.doLoginParams.code}}) II. Post request:

1) FormData method for transmitting parameters of form data

① axios configuration, setting request header: Header

Accept: text/plain, text/html-- specifies the type of content that the client can receive

Content-Type:Content-Type: application/x-www-form-urlencoded-- the requested MIME information corresponding to the entity

The general settings are as follows:

This.axios.defaults.headers ['Content-Type'] =' application/x-www-form-urlencoded;'; / / configuration request header / / JSON format is: 'application/json;charset=UTF-8'

The content types that can be accepted by the specified client are generally in the global encapsulated request: main.js

Axios.interceptors.request.use (config = > {/ / specify the content type that the client can receive config.headers.Accept = "application/json, text/plain,*/*" return config;}, error = > Promise.error (error))

Similar to setting up separate response exception handling:

Axios.interceptors.response.use (response = > {/ / system error return response;}, error = > {/ / request error can be redirected to the network exception page console.log ("main page catches axios exception:" + JSON.stringify (error)); / / router.push ({/ / path: "/ networkerr", / / name: "networkerr" / /});})

Qs middleware is introduced into the ② request API encapsulation file. When the request method is post, the parameters need to be converted through the qs.stringify function.

The qs module is included in axios and does not need to be downloaded. Directly importing the core is to convert the parameters into standard key-value pairs.

Global reference method: in main.js

Import qs from 'qs'; Vue.prototype.$qs = qs

Then you can use this.$qs.stringify (params) directly on each page.

Single page reference:

Var qs = require ('qs'); this.axios.post (this.postUrl,qs.stringify ({"value1": 100," vaule2 ":" 123"}))

2) JSON string parameter transfer method

① axios configuration, setting request header: Head

This.axios.defaults.headers ['Content-Type'] =' application/json;charset=UTF-8'; / / configuration request header

② request parameters are converted using the SON.stringify () function, or you can pass parameters directly without conversion

This.axios.post (this.imageSaveUrl, JSON.stringify (params)) III. Expansion and supplement

Finally, a response that sets the webservice interface to return the json format directly instead of the xml format is attached:

Change the way the data is returned, and use Context.Response.Write instead of return statement to return data in Json format, as follows:

Context.Response.Charset = "utf-8"; / / sets the character set type or GB2312Context.Response.ContentEncoding = System.Text.Encoding.UTF8; / / or System.Text.Encoding.GetEncoding ("GB2312"); Context.Response.Write (jaoData); Context.Response.End () Thank you for your reading. the above is the content of "what is the Vue+Axios request interface method and parameter passing method". After the study of this article, I believe you have a deeper understanding of what the Vue+Axios request interface method and parameter transfer method is, and the specific use needs to be verified in practice. Here is, the editor will push for you more related knowledge points of the article, welcome to follow!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.