文章详情

短信预约-IT技能 免费直播动态提醒

请输入下面的图形验证码

提交验证

短信预约提醒成功

Vue+Axios请求接口方法与传参方式是什么

2023-06-22 05:17

关注

这篇文章主要讲解了“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"; //设置字符集类型 或者GB2312Context.Response.ContentEncoding = System.Text.Encoding.UTF8; //或者System.Text.Encoding.GetEncoding("GB2312");Context.Response.Write(jaoData);Context.Response.End();

感谢各位的阅读,以上就是“Vue+Axios请求接口方法与传参方式是什么”的内容了,经过本文的学习后,相信大家对Vue+Axios请求接口方法与传参方式是什么这一问题有了更深刻的体会,具体使用情况还需要大家实践验证。这里是编程网,小编将为大家推送更多相关知识点的文章,欢迎关注!

阅读原文内容投诉

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

软考中级精品资料免费领

  • 历年真题答案解析
  • 备考技巧名师总结
  • 高频考点精准押题
  • 2024年上半年信息系统项目管理师第二批次真题及答案解析(完整版)

    难度     807人已做
    查看
  • 【考后总结】2024年5月26日信息系统项目管理师第2批次考情分析

    难度     351人已做
    查看
  • 【考后总结】2024年5月25日信息系统项目管理师第1批次考情分析

    难度     314人已做
    查看
  • 2024年上半年软考高项第一、二批次真题考点汇总(完整版)

    难度     433人已做
    查看
  • 2024年上半年系统架构设计师考试综合知识真题

    难度     221人已做
    查看

相关文章

发现更多好内容

猜你喜欢

AI推送时光机
位置:首页-资讯-后端开发
咦!没有更多了?去看看其它编程学习网 内容吧
首页课程
资料下载
问答资讯