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 Jcrop插件实现图片选取功能
Nov 23 Javascript
Highcharts 非常实用的Javascript统计图demo示例
Jul 03 Javascript
JS中的异常处理方法分享
Dec 22 Javascript
jquery sortable的拖动方法示例详解
Jan 16 Javascript
Javascript之Date对象详解
Jun 07 Javascript
node.js利用redis数据库缓存数据的方法
Mar 01 Javascript
微信小程序 实例开发总结
Apr 26 Javascript
微信小程序日历组件calendar详解及实例
Jun 08 Javascript
Vue修改mint-ui默认样式的方法
Feb 03 Javascript
详解vue-cli 构建项目 vue-cli请求后台接口 vue-cli使用axios、sass、swiper
May 28 Javascript
vue实现购物车加减
May 30 Javascript
JS创建或填充任意长度数组的小技巧汇总
Oct 24 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的中问验证码
2006/11/25 PHP
thinkPHP3.2简单实现文件上传的方法
2016/05/16 PHP
浅析PHP中的闭包和匿名函数
2017/12/25 PHP
PHP操作Redis数据库常用方法示例
2018/08/25 PHP
JQuery 学习笔记 选择器之二
2009/07/23 Javascript
jQuery Tools tab(幻灯片)
2012/07/14 Javascript
jQuery.query.js 取参数的两点问题分析
2012/08/06 Javascript
js事件绑定快捷键以ctrl+k为例
2014/09/30 Javascript
JQuery ztree 异步加载实例讲解
2016/02/25 Javascript
详解BootStrap中Affix控件的使用及保持布局的美观的方法
2016/07/08 Javascript
JS返回只包含数字类型的数组实例分析
2016/12/16 Javascript
jQuery Pagination分页插件使用方法详解
2017/02/28 Javascript
Vue2.0权限树组件实现代码
2017/08/29 Javascript
vue webpack打包优化操作技巧
2018/02/22 Javascript
vue中设置、获取、删除cookie的方法
2018/09/21 Javascript
vue页面切换过渡transition效果
2018/10/08 Javascript
详解vantUI框架在vue项目中的应用踩坑
2018/12/06 Javascript
python实现在sqlite动态创建表的方法
2015/05/08 Python
Python的“二维”字典 (two-dimension dictionary)定义与实现方法
2016/04/27 Python
python实现下载pop3邮件保存到本地
2018/06/19 Python
Python3.4 splinter(模拟填写表单)使用方法
2018/10/13 Python
Python3列表内置方法大全及示例代码小结
2019/05/10 Python
python爬虫-模拟微博登录功能
2019/09/12 Python
详解Django配置优化方法
2019/11/18 Python
python使用python-pptx删除ppt某页实例
2020/02/14 Python
django-csrf使用和禁用方式
2020/03/13 Python
如何用Python绘制3D柱形图
2020/09/16 Python
使用html2canvas实现将html内容写入到canvas中生成图片
2020/01/03 HTML / CSS
专升本自我鉴定
2013/10/10 职场文书
农民致富事迹材料
2014/01/23 职场文书
小学生优秀评语大全
2014/04/22 职场文书
大专毕业生自我鉴定范文(2篇)
2014/09/27 职场文书
个性与发展自我评价
2015/03/06 职场文书
年底个人总结范文
2015/03/10 职场文书
Python文件的操作示例的详细讲解
2021/04/08 Python
Mysql数据库按时间点恢复实战记录
2021/06/30 MySQL