Detailed explanation of Vue + Axios request interface method and parameter passing method

Front-end projects built with Vue scaffolding usually use Axios encapsulated interface requests. The methods introduced in the project will not be introduced in detail. This article mainly introduces interface calls and different forms of parameter passing methods.

1. Get request:

Get request is relatively simple, usually concatenating the parameters into the URL and connecting them with ? & or in the following way:

this.axios.get(this.getWxQyUserInfoUrl, {
params: {
agentid: this.doLoginParams.agentid,
code: this.doLoginParams.code
}
})

2. Post request:

1) Form data FormData parameter transmission method ① axios configuration, set the request header: Header
Accept: text/plain, text/html --Specifies the content type that the client can receive
Content-Type: Content-Type: application/x-www-form-urlencoded -- The MIME information corresponding to the requested entity is generally set as follows:
this.axios.defaults.headers['Content-Type'] = 'application/x-www-form-urlencoded;'; //Configure request header //JSON format: 'application/json; charset=UTF-8'
Specify the content type that the client can accept, usually in the global encapsulation request: in 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 => {
// You can redirect the request error to the network exception page as needed console.log("The main page captures axios exception: "+JSON.stringify(error));
// router.push({
// path: "/networkerr",
// name: "networkerr"
// });
})

② In the request interface encapsulation file, introduce the qs middleware. When the request method is post, the parameters need to be converted to the format through the qs.stringify function
The qs module is built-in in axios and does not need to be downloaded. Importing the core directly converts the parameters into a standard key-value global reference method: in main.js

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

Then you can directly use this.$qs.stringify(params) on each page to use a single page reference:

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

2) JSON string parameter passing method ① axios configuration, set the request header: Head

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

② The request parameters are converted using the SON.stringify() function, or they can be passed directly without conversion.

this.axios.post(this.imageSaveUrl, JSON.stringify(params))

3. Expansion and Supplement

Finally, attach the setting webservice interface to directly return the response in json format instead of xml format:
Change the way data is returned, use Context.Response.Write instead of the return statement, and you can return data in Json format, as follows:

Context.Response.Charset = "utf-8"; //Set the character set type or GB2312
Context.Response.ContentEncoding = System.Text.Encoding.UTF8; //or System.Text.Encoding.GetEncoding("GB2312");
Context.Response.Write(jaoData);
Context.Response.End();

This is the end of this article about Vue + Axios request interface method and parameter passing. For more related Vue Axios request interface content, please search 123WORDPRESS.COM's previous articles or continue to browse the following related articles. I hope everyone will support 123WORDPRESS.COM in the future!