axios封装与传参示例详解


Posted in Javascript onOctober 18, 2020

1.开发环境 vue+typescript

2.电脑系统 windows10专业版

3.在开发的过程中,我们会经常使用到 axios进行数据的交互,下面我来说一下,axios封装和传参!

4-1:下面结构如下:

axios封装与传参示例详解

4-2:request.js代码如下:

import axios from 'axios'
import qs from 'qs'
axios.defaults.timeout = 2000000;      //响应时间
axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded';  //配置请求头
// axios.defaults.baseURL = 'http://192.168.137.208:3000/'; //配置接口地址

//POST传参序列化(添加请求拦截器)
axios.interceptors.request.use((config) => {
 //在发送请求之前做某件事
 // config.headers.Accept="appliaction/json,text/plan";
 if(config.method === 'post'){
  config.data = qs.stringify(config.data);
 }
 return config;
},(error) =>{
 console.log('错误的传参')
 return Promise.reject(error);
});
// axios.interceptors.response.use((res) => {
//  //对响应数据做些事
//  if (!res.data) {
//  return Promise.resolve(res);
//  }
//  return res;
// }, (error) => {
//  console.log(error);
//  console.log('网络异常')
//  return Promise.reject(error);
// });

//返回状态判断(添加响应拦截器)
axios.interceptors.response.use((res) =>{
 //对响应数据做些事
 if(!res.data.success){
  return Promise.resolve(res);
 }
 return res;
}, (error) => {
 console.log('网络异常')
 return Promise.reject(error);
});

//返回一个Promise(发送post请求)
export function fetchPost(url,param) {
 return new Promise((resolve, reject) => {
  axios.post(url,param)
   .then(response => {
    resolve(response);
   }, err => {
    reject(err);
   })
   .catch((error) => {
    reject(error)
   })
 })
}
// 返回一个Promise(发送get请求)
export function fetchGet(url,param) {
 return new Promise((resolve, reject) => {
  axios.get(url,{params:param})
   .then(response => {
    resolve(response)
   }, err => {
    reject(err)
   })
   .catch((error) => {
    reject(error)
   })
 })
}
export default {
 fetchPost,
 fetchGet,
}

//注意:请求头的配置,决定了传参的方法和格式,请求头的配置至关重要

5.SheBei.ts代码如下:

import {fetchPost,fetchGet} from '@/utils/request'
export function feng(feng){
 return fetchPost('/feng',feng);
}

6.Home.vue请求代码如下:

mounted(){
  let a:any={
   "name":"111",
   "pass":"000"
  }
  feng(a).then((res)=>{
   console.log(res);
  })
 }

7.效果如下:

axios封装与传参示例详解

8.在node.js中输入如下:

axios封装与传参示例详解

//可以看到,接受到了前端传过来的参数!

9.参数的传递取决于,request.ts中请求头的配置!

10.请求头配置如下:

--第一种
axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded'; //请求体中的数据会以普通表单形式(键值对)发送到后端
--第二种
axios.defaults.headers.post['Content-Type'] ='application/json'; // 请求体中的数据会以json字符串的形式发送到后端
--第三种
axios.defaults.headers.post['Content-Type'] ='multipart/form-data'; // 它会将请求体的数据处理为一条消息,以标签为单元,用分隔符分开。既可以上传键值对,也可以上传文件

11.使用10第一种,传参效果如下:

axios封装与传参示例详解

12.使用10第二种,传参效果如下:

axios封装与传参示例详解

//注意:使用这种方法,需要修改request.ts代码:

axios封装与传参示例详解

13.使用10第三种,传参效果如下:

axios封装与传参示例详解

14.本期的教程到了这里就结束啦,让我们一起努力走向巅峰!

总结

到此这篇关于axios封装与传参示例的文章就介绍到这了,更多相关axios封装与传参内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Javascript 相关文章推荐
JQuery CSS样式控制 学习笔记
Jul 23 Javascript
你必须知道的Javascript知识点之"this指针"的应用
Apr 23 Javascript
js验证模型自我实现的具体方法
Jun 21 Javascript
iframe子页面获取父页面元素的方法
Nov 05 Javascript
js数组循环遍历数组内所有元素的方法
Jan 18 Javascript
jQuery动画显示和隐藏效果实例演示(附demo源码下载)
Dec 31 Javascript
JavaScript 浏览器兼容性总结及常用浏览器兼容性分析
Mar 30 Javascript
html5 canvas 详细使用教程
Jan 20 Javascript
Bootstrap 中data-[*] 属性的整理
Mar 13 Javascript
layui 弹出层回调获取弹出层数据的例子
Sep 02 Javascript
Vue.js数字输入框组件使用方法详解
Oct 19 Javascript
vue中keep-alive,include的缓存问题
Nov 26 Javascript
详解如何使用React Hooks请求数据并渲染
Oct 18 #Javascript
js中复选框的取值及赋值示例详解
Oct 18 #Javascript
如何搭建一个完整的Vue3.0+ts的项目步骤
Oct 18 #Javascript
详解如何在Javascript中使用Object.freeze()
Oct 18 #Javascript
从表单校验看JavaScript策略模式的使用详解
Oct 17 #Javascript
关于IDEA中的.VUE文件报错 Export declarations are not supported by current JavaScript version
Oct 17 #Javascript
JS页面动态绘图工具SVG,Canvas,VML介简介
Oct 16 #Javascript
You might like
php 生成饼图 三维饼图
2009/09/28 PHP
一步一步学习PHP(4) php 函数 补充2
2010/02/15 PHP
PHP Undefined index报错的修复方法
2011/07/17 PHP
PHP和Shell实现检查SAMBA与NFS Server是否存在
2015/01/07 PHP
php简单实现屏蔽指定ip段用户的访问
2015/04/29 PHP
thinkPHP数据查询常用方法总结【select,find,getField,query】
2017/03/15 PHP
利用Laravel事件系统如何实现登录日志的记录详解
2017/05/20 PHP
thinkPHP中钩子的使用方法实例分析
2017/11/16 PHP
TP5.0框架实现无限极回复功能的方法分析
2019/05/04 PHP
JavaScript使用prototype定义对象类型(转)[
2006/12/22 Javascript
Highslide.js是一款基于js实现的网页中图片展示插件
2020/03/30 Javascript
js 中 document.createEvent的用法
2010/08/29 Javascript
基于Jquery的实现回车键Enter切换焦点
2010/09/14 Javascript
Javascript实现DIV滚动自动滚动到底部的代码
2012/03/01 Javascript
mailto的使用技巧分享
2012/12/21 Javascript
使用js如何实现全选与全不选
2013/12/30 Javascript
jquery教程限制文本框只能输入数字和小数点示例分享
2014/01/13 Javascript
javascript基础语法学习笔记
2016/01/04 Javascript
微信小程序多列选择器range-key使用详解
2020/03/30 Javascript
详解如何使用webpack+es6开发angular1.x
2017/08/16 Javascript
vue2.0实现音乐/视频播放进度条组件
2018/06/06 Javascript
对于防止按钮重复点击的尝试详解
2019/04/22 Javascript
使用vue打包进行云服务器上传的问题
2020/03/02 Javascript
jquery简易手风琴插件的封装
2020/10/13 jQuery
[01:28:56]2014 DOTA2华西杯精英邀请赛 5 24 CIS VS DK
2014/05/26 DOTA
Python自动化测试工具Splinter简介和使用实例
2014/05/13 Python
python实现Decorator模式实例代码
2018/02/09 Python
python 读取、写入txt文件的示例
2020/09/27 Python
详解HTML5如何使用可选样式表为网站或应用添加黑暗模式
2020/04/07 HTML / CSS
法律专业大学生职业生涯规划书:向目标一步步迈进
2014/09/22 职场文书
作弊检讨书
2015/01/27 职场文书
MBA推荐信怎么写
2015/03/25 职场文书
疾病证明书
2015/06/19 职场文书
python3实现无权最短路径的方法
2021/05/12 Python
Python 中的 copy()和deepcopy()
2021/11/07 Python
Nginx实现会话保持的两种方式
2022/03/18 Servers