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

 更新时间:2021年12月25日 11:46:07   作者:流浪阿丁  
使用Vue的脚手架搭建的前端项目,通常都使用Axios封装的接口请求,项目中引入的方式不做多介绍,本文主要介绍接口调用与不同形式的传参方法。对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 请求接口内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • Vue3+vantUI3时间组件封装过程支持选择年以及年月日时分秒

    Vue3+vantUI3时间组件封装过程支持选择年以及年月日时分秒

    这篇文章主要介绍了Vue3+vantUI3时间组件封装过程支持选择年以及年月日时分秒,本文通过实例代码给大家介绍的非常详细,感兴趣的朋友跟随小编一起看看吧
    2024-07-07
  • Vue页面切换和a链接的本质区别详解

    Vue页面切换和a链接的本质区别详解

    今天小编就为大家分享一篇Vue页面切换和a链接的本质区别详解,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2019-11-11
  • Vue引入高德地图并触发实现多个标点的示例详解

    Vue引入高德地图并触发实现多个标点的示例详解

    这篇文章主要介绍了Vue引入高德地图并触发实现多个标点,主要是在public下的index.html中引入地图,引入组件设置宽高100%,本文通过示例代码给大家介绍的非常详细,需要的朋友可以参考下
    2022-05-05
  • Vue3中使用监听器的具体实践

    Vue3中使用监听器的具体实践

    监听器是Vue3中非常好用的一个特性,用于监听某个响应式变量的变化,本文就来介绍一下Vue3中使用监听器的具体实践,具有一定的参考价值,感兴趣的可以了解一下
    2023-12-12
  • Vue electron前端开启局域网接口实现流程详细介绍

    Vue electron前端开启局域网接口实现流程详细介绍

    用electron写了一个自己用的小软件,无后端,纯本地的数据。最近想着开发一个手机端app,将PC端的数据进行同步。为了这小小的功能单独写个后端又麻烦。干脆前后端不分离哈哈,直接在前端软件中开启接口
    2022-10-10
  • Vue嵌套iframe时$router.go(-1)后退bug的原因解析

    Vue嵌套iframe时$router.go(-1)后退bug的原因解析

    这篇文章主要介绍了Vue嵌套iframe,$router.go(-1)后退bug的问题原因及解决方法,本文给大家分享问题原因所在及解决方案,需要的朋友可以参考下吧
    2023-09-09
  • vue如何判断数组中的对象是否包含某个值

    vue如何判断数组中的对象是否包含某个值

    这篇文章主要介绍了vue如何判断数组中的对象是否包含某个值,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-08-08
  • Vue中的@blur/@focus事件解读

    Vue中的@blur/@focus事件解读

    这篇文章主要介绍了Vue中的@blur/@focus事件解读,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2023-03-03
  • vue使用计算属性完成动态滑竿条制作

    vue使用计算属性完成动态滑竿条制作

    这篇文章主要介绍了vue使用计算属性完成动态滑竿条制作,文章围绕计vue算属制作动态滑竿条的相关代码完成内容,需要的朋友可以参考一下
    2021-12-12
  • Vue.js自定义指令的基本使用详情

    Vue.js自定义指令的基本使用详情

    这篇文章主要介绍了Vue.js自定义指令的基本使用详情,文章围绕主题展开详细的内容介绍,具有一定的参考价值需要的小伙伴可以参考一下
    2022-05-05

最新评论