欢迎光临
我的个人博客网站

Vue + Axios 请求接口方法与传参详解

使用Vue的脚手架搭建的前端项目,通常都使用Axios封装的接口请求,项目中引入的方式不做多介绍,本文主要介绍接口调用与不同形式的传参方法。

 

一、Get请求:

Get请求比较简单,通常就是将参数拼接到url中 用? &连接
或者用下面这种方式:
this.axios.get(this.getWxQyUserInfoUrl, { params: { agentid: this.doLoginParams.agentid, code: this.doLoginParams.code } })

 

二、Post请求:

1)表单数据 FormData传参方式
① axios配置,设置请求头:Header
Accept: text/plain, text/html –指定客户端能够接收的内容类型
Content-Type:Content-Type: application/x-www-form-urlencoded –请求的与实体对应的MIME信息
一般设置方式如下:
this.axios.defaults.headers[‘Content-Type’] = ‘application/x-www-form-urlencoded;’; //配置请求头 //JSON格式的为:’application/json;charset=UTF-8′
指定客户端能接受的内容类型 一般在全局的封装request中:main.js中
axios.interceptors.request.use(config => { //指定客户端能够接收的内容类型 config.headers.Accept = "application/json, text/plain,*/*" return config; }, error => Promise.error(error) )

 
跟设置单独的响应异常处理类似:
axios.interceptors.response.use(response => { // 系统报错 return response; }, error => { // 可根据需要将请求报错跳转到网络异常页面 console.log("主页面捕获axios异常:"+JSON.stringify(error)); // router.push({ // path: "/networkerr", // name: "networkerr" // }); })

 

② 请求接口封装文件中,引入qs中间件,请求方法为post时,参数需要通过qs.stringify函数进行格式转换
qs模块是axios中自带的不需要下载,直接导入 核心就是把参数转换成标准的键值对
全局引用方式:main.js中
 import qs from qs‘;
 Vue.prototype.$qs = qs; 
然后在各个页面就可以直接 this.$qs.stringify(params)使用了
单页面引用:
var qs = require('qs'); this.axios.post(this.postUrl,qs.stringify({"value1":100,"vaule2":"123"}))  

 
2)JSON字符串传参方式
① axios配置,设置请求头:Head
this.axios.defaults.headers[‘Content-Type’] = ‘application/json;charset=UTF-8’; //配置请求头
② 请求参数使用SON.stringify()函数转换,也可以不转换直接传参数
this.axios.post(this.imageSaveUrl, JSON.stringify(params))
 
三、拓展补充
最后附上设置webservice接口直接返回json格式而不是xml格式的响应:
改变数据的返回方式,用 Context.Response.Write代替return 语句,可返回Json格式数据,如下:
Context.Response.Charset = “utf-8”; //设置字符集类型 或者GB2312
Context.Response.ContentEncoding = System.Text.Encoding.UTF8; //或者System.Text.Encoding.GetEncoding(“GB2312”);
Context.Response.Write(jaoData);
Context.Response.End();
 

 
 

赞(0) 打赏
未经允许不得转载:张拓的天空 » Vue + Axios 请求接口方法与传参详解
分享到: 更多 (0)

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

专业的IT技术经验分享 更专业 更方便

联系我们本站主机

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏