iis服务器助手广告广告
返回顶部
首页 > 资讯 > 前端开发 > JavaScript >Vue + Axios 请求接口方法与传参方式详解
  • 717
分享到

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

2024-04-02 19:04:59 717人浏览 独家记忆
摘要

目录一、Get请求:二、Post请求:三、拓展补充使用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 请求接口内容请搜索编程网以前的文章或继续浏览下面的相关文章希望大家以后多多支持编程网!

--结束END--

本文标题: Vue + Axios 请求接口方法与传参方式详解

本文链接: https://www.lsjlt.com/news/160845.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

本篇文章演示代码以及资料文档资料下载

下载Word文档到电脑,方便收藏和打印~

下载Word文档
猜你喜欢
软考高级职称资格查询
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作