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 相关文章推荐
鼠标经过tr时,改变tr当前背景颜色
Jan 13 Javascript
node.js中的fs.fchmod方法使用说明
Dec 16 Javascript
JS插件overlib用法实例详解
Dec 26 Javascript
jQuery Easyui学习教程之实现datagrid在没有数据时显示相关提示内容
Jul 09 Javascript
Js动态设置rem来实现移动端字体的自适应代码
Oct 14 Javascript
jQuery时间验证和转换为标准格式的时间格式
Mar 06 Javascript
vue元素实现动画过渡效果
Jul 01 Javascript
swiper插件自定义切换箭头按钮
Dec 28 Javascript
一步一步的了解webpack4的splitChunk插件(小结)
Sep 17 Javascript
vue使用自定义事件的表单输入组件用法详解【日期组件与货币组件】
Jun 01 Javascript
vuex页面刷新导致数据丢失的解决方案
Dec 10 Vue.js
微信小程序APP的生命周期及页面的生命周期
Apr 19 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
攻克CakePHP系列二 表单数据显示
2008/10/22 PHP
在WordPress中使用wp-cron插件来设置定时任务
2015/12/10 PHP
PHP基于PDO扩展操作mysql数据库示例
2018/12/24 PHP
window.open的功能全解析
2006/10/10 Javascript
身份证号码前六位所代表的省,市,区, 以及地区编码下载
2007/04/12 Javascript
通过修改referer下载文件的方法
2008/05/11 Javascript
js和jquery对dom节点的操作(创建/追加)
2013/04/21 Javascript
jquery中get和post的简单实例
2014/02/04 Javascript
js中top的作用深入剖析
2014/03/04 Javascript
jquery插件开发之实现md5插件
2014/03/17 Javascript
JavaScript中的变量作用域介绍
2014/12/31 Javascript
基于JQuery和原生JavaScript实现网页定位导航特效
2017/04/03 jQuery
使用原生js写ajax实例(推荐)
2017/05/31 Javascript
js实现手机web图片左右滑动效果
2017/12/29 Javascript
微信小程序 Animation实现图片旋转动画示例
2018/08/22 Javascript
JavaScript实现JSON合并操作示例【递归深度合并】
2018/09/07 Javascript
jQuery+css last-child实现选择最后一个子元素操作示例
2018/12/10 jQuery
Vue表单绑定的实例代码(单选按钮,选择框(单选时,多选时,用 v-for 渲染的动态选项)
2019/05/13 Javascript
JavaScript点击按钮生成4位随机验证码
2021/01/28 Javascript
Python中无限元素列表的实现方法
2014/08/18 Python
Python连接mssql数据库编码问题解决方法
2015/01/01 Python
python链接oracle数据库以及数据库的增删改查实例
2018/01/30 Python
Python文本处理之按行处理大文件的方法
2018/04/09 Python
Django添加sitemap的方法示例
2018/08/06 Python
Django获取该数据的上一条和下一条方法
2019/08/12 Python
解决keras模型保存h5文件提示无此目录问题
2020/07/01 Python
Java byte数组操纵方式代码实例解析
2020/07/22 Python
Roxy荷兰官方网站:冲浪、滑雪板、服装和配件
2019/10/22 全球购物
英国折扣高尔夫商店:Discount Golf Store
2019/11/19 全球购物
教师求职信范文分享
2013/12/27 职场文书
2015年组织部工作总结
2015/04/03 职场文书
刑事附带民事诉讼答辩状
2015/05/22 职场文书
行政处罚听证告知书
2015/07/01 职场文书
2016幼儿园新学期寄语
2015/12/03 职场文书
《小小的船》教学反思
2016/02/18 职场文书
Centos7 Shell编程之正则表达式、文本处理工具详解
2022/08/05 Servers