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 相关文章推荐
Extjs gridpanel 出现横向滚动条问题的解决方法
Jul 04 Javascript
jQuery 快速结束当前正在执行的动画
Nov 20 Javascript
js+html5操作sqlite数据库的方法
Feb 02 Javascript
工作中常用的js、jquery自定义扩展函数代码片段汇总
Dec 22 Javascript
ajax图片上传,图片异步上传,更新实例
Dec 30 Javascript
js遍历json对象所有key及根据动态key获取值的方法(必看)
Mar 09 Javascript
js实现数组和对象的深浅拷贝
Sep 30 Javascript
解决vue2.0路由跳转未匹配相应用路由避免出现空白页面的问题
Aug 24 Javascript
JavaScript中Array方法你该知道的正确打开方法
Sep 11 Javascript
Vue动态路由缓存不相互影响的解决办法
Feb 19 Javascript
Vue项目从webpack3.x升级webpack4不完全指南
Apr 28 Javascript
基于JavaScript伪随机正态分布代码实例
Nov 07 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
一个ftp类(ini.php)
2006/10/09 PHP
用PHP函数解决SQL injection
2006/12/09 PHP
Linux下PHP连接Oracle数据库
2014/08/20 PHP
学习php设计模式 php实现抽象工厂模式
2015/12/07 PHP
Fleaphp常见函数功能与用法示例
2016/11/15 PHP
PHP回调函数概念与用法实例分析
2017/11/03 PHP
php app支付宝回调(异步通知)详解
2018/07/25 PHP
如何解决PHP获取不到SESSION信息之一般情况
2019/10/10 PHP
jquery.jstree 增加节点的双击事件代码
2010/07/27 Javascript
ASP中Sub和Function的区别说明
2020/08/30 Javascript
用jQuery中的ajax分页实现代码
2011/09/20 Javascript
理解JAVASCRIPT中hasOwnProperty()的作用
2013/06/05 Javascript
浅谈JavaScript的事件
2015/02/27 Javascript
JavaScript中iframe实现局部刷新的几种方法汇总
2016/01/06 Javascript
拥有一个属于自己的javascript表单验证插件
2016/03/24 Javascript
学习Angularjs分页指令
2016/07/01 Javascript
BooStrap对导航条的改造实践小结
2016/09/21 Javascript
JavaScript实现经典排序算法之冒泡排序
2016/12/28 Javascript
JQ中$(window).load和$(document).ready区别与执行顺序
2017/03/01 Javascript
微信小程序中使用javascript 回调函数
2017/05/11 Javascript
利用Angular2 + Ionic3开发IOS应用实例教程
2018/01/15 Javascript
浅谈Redux中间件的实践
2018/07/27 Javascript
JavaScript使用闭包模仿块级作用域操作示例
2019/01/21 Javascript
实用的Vue开发技巧
2019/05/30 Javascript
webpack的pitching loader详解
2019/09/23 Javascript
JS实现transform实现扇子效果
2020/01/17 Javascript
JavaScript运行机制实例分析
2020/04/11 Javascript
[08:40]Navi Vs Newbee
2018/06/07 DOTA
跟老齐学Python之正规地说一句话
2014/09/28 Python
python脚本实现数据导出excel格式的简单方法(推荐)
2016/12/30 Python
python排序函数sort()与sorted()的区别
2018/09/18 Python
解决Shell执行python文件,传参空格引起的问题
2018/10/30 Python
Python中logging日志库实例详解
2020/02/19 Python
写给媳妇的检讨书
2015/05/06 职场文书
爱心捐赠活动简讯
2015/07/20 职场文书
利用python Pandas实现批量拆分Excel与合并Excel
2021/05/23 Python