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();
到此这篇关于Vue + Axios 请求接口方法与传参详解的文章就介绍到这了,更多相关Vue Axios 请求接口内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
这篇文章主要为大家详细介绍了使用Vue实现简单日历效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-08-08
本篇文章主要介绍了详解Vue路由钩子及应用场景（小结），小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-11-11
这篇文章主要介绍了vue关于data变量定义的问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2024-03-03
这篇文章主要为大家详细介绍了vue使用recorder.js实现录音功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2019-11-11
下面小编就为大家分享一篇webpack vue项目开发环境局域网访问方法，具有很好的参考价值，希望对大家有所帮助，一起跟随小编过来看看吧2018-03-03
这篇文章主要介绍了浅谈Vue CLI 3结合Lerna进行UI框架设计,在此之前先简单介绍一下Element的构建流程，以便对比新的UI框架设计。小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2019-04-04
这篇文章主要介绍了Vue+abp微信扫码登录的实现代码示例，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2020-01-01
这篇文章主要介绍了在vue项目里面使用引入公共方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-04-04
本篇文章主要介绍了详解vue静态资源打包中的坑与解决方案，本文主要解决路径问题，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-02-02
本文主要介绍了vue中使用词云图的实现示例，文中通过示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-01-01
最新评论