耀极客论坛

 找回密码
 立即注册
查看: 624|回复: 0

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

[复制链接]

336

主题

318

帖子

22万

积分

管理员

Rank: 9Rank: 9Rank: 9

积分
220553
发表于 2022-5-8 01:00:02 | 显示全部楼层 |阅读模式
  使用Vue的脚手架搭建的前端项目,通常都使用Axios封装的接口请求,项目中引入的方式不做多介绍,本文主要介绍接口调用与不同形式的传参方法。对Vue + Axios 请求接口方法与传参问题感兴趣的朋友一起看看吧
  使用Vue的脚手架搭建的前端项目,通常都使用Axios封装的接口请求,项目中引入的方式不做多介绍,本文主要介绍接口调用与不同形式的传参方法。

一、Get请求:
  Get请求比较简单,通常就是将参数拼接到url中 用? &连接或者用下面这种方式:
  1. this.axios.get(this.getWxQyUserInfoUrl, {
  2. params: {
  3. agentid: this.doLoginParams.agentid,
  4. code: this.doLoginParams.code
  5. }
  6. })
复制代码
二、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中
  1. axios.interceptors.request.use(config => {
  2. //指定客户端能够接收的内容类型
  3. config.headers.Accept = "application/json, text/plain,*/*"
  4. return config;
  5. }, error => Promise.error(error)
  6. )
复制代码
  跟设置单独的响应异常处理类似:
  1. axios.interceptors.response.use(response => {
  2. // 系统报错
  3. return response;
  4. }, error => {
  5. // 可根据需要将请求报错跳转到网络异常页面
  6. console.log("主页面捕获axios异常:"+JSON.stringify(error));
  7. // router.push({
  8. // path: "/networkerr",
  9. // name: "networkerr"
  10. // });
  11. })
复制代码
  ② 请求接口封装文件中,引入qs中间件,请求方法为post时,参数需要通过qs.stringify函数进行格式转换
qs模块是axios中自带的不需要下载,直接导入 核心就是把参数转换成标准的键值对
全局引用方式:main.js中
  1. import qs from 'qs';
  2. Vue.prototype.$qs = qs;
复制代码
  然后在各个页面就可以直接 this.$qs.stringify(params)使用了
单页面引用:
  1. var qs = require('qs');
  2. this.axios.post(this.postUrl,qs.stringify({"value1":100,"vaule2":"123"}))
复制代码
  2)JSON字符串传参方式
① axios配置,设置请求头:Head
  1. this.axios.defaults.headers['Content-Type'] = 'application/json;charset=UTF-8'; //配置请求头
复制代码
  ② 请求参数使用SON.stringify()函数转换,也可以不转换直接传参数
  1. this.axios.post(this.imageSaveUrl, JSON.stringify(params))
复制代码
三、拓展补充

  最后附上设置webservice接口直接返回json格式而不是xml格式的响应:
改变数据的返回方式,用 Context.Response.Write代替return 语句,可返回Json格式数据,如下:
  1. Context.Response.Charset = "utf-8"; //设置字符集类型 或者GB2312
  2. Context.Response.ContentEncoding = System.Text.Encoding.UTF8; //或者System.Text.Encoding.GetEncoding("GB2312");
  3. Context.Response.Write(jaoData);
  4. Context.Response.End();
复制代码
  到此这篇关于Vue + Axios 请求接口方法与传参详解的文章就介绍到这了,更多相关Vue Axios 请求接口内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!


回复

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

Archiver|手机版|小黑屋|耀极客论坛 ( 粤ICP备2022052845号-2 )|网站地图

GMT+8, 2022-11-28 19:58 , Processed in 0.074434 second(s), 20 queries .

Powered by Discuz! X3.4

Copyright © 2001-2020, Tencent Cloud.

快速回复 返回顶部 返回列表