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 相关文章推荐
js控制div及网页相关属性的代码
Dec 19 Javascript
Javascript无阻塞加载具体方式
Jun 28 Javascript
jQuery实现多按钮单击变色
Nov 27 Javascript
jQuery中DOM树操作之复制元素的方法
Jan 23 Javascript
JavaScript列表框listbox全选和反选的实现方法
Mar 18 Javascript
JavaScript操作选择对象的简单实例
May 16 Javascript
javascript类型系统——日期Date对象全面了解
Jul 13 Javascript
Angularjs中$http以post请求通过消息体传递参数的实现方法
Aug 05 Javascript
jQuery判断邮箱格式对错实例代码讲解
Apr 12 jQuery
深入理解vue2.0路由如何配置问题
Jul 18 Javascript
Vue.js实现网格列表布局转换方法
Aug 25 Javascript
微信小程序后端实现授权登录
Feb 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
ip签名探针
2006/10/09 PHP
20个PHP常用类库小结
2011/09/11 PHP
关于PHP实现异步操作的研究
2013/02/03 PHP
新手菜鸟必读:session与cookie的区别
2013/08/22 PHP
PHP汉字转换拼音的函数代码
2015/12/30 PHP
PHP引用的调用方法分析
2016/04/25 PHP
PHP有序表查找之插值查找算法示例
2018/02/10 PHP
node.js入门教程迷你书、node.js入门web应用开发完全示例
2014/04/06 Javascript
js的toLowerCase方法用法实例
2015/01/27 Javascript
js实现简单随机抽奖的方法
2015/01/27 Javascript
第一次接触JS require.js模块化工具
2016/04/17 Javascript
js实现的光标位置工具函数示例
2016/10/03 Javascript
详解Vue 全局引入bass.scss 处理方案
2018/03/26 Javascript
vue两个组件间值的传递或修改方式
2018/07/04 Javascript
js for终止循环 跳出多层循环
2018/10/04 Javascript
详解nodejs 配置文件处理方案
2019/01/02 NodeJs
使用JavaScrip模拟实现仿京东搜索框功能
2019/10/16 Javascript
python基础教程之常用运算符
2014/08/29 Python
Python自定义scrapy中间模块避免重复采集的方法
2015/04/07 Python
Python实现学生成绩管理系统
2020/04/05 Python
对python csv模块配置分隔符和引用符详解
2018/12/12 Python
解决python写入带有中文的字符到文件错误的问题
2019/01/31 Python
Python函数装饰器原理与用法详解
2019/08/16 Python
Pyinstaller加密打包应用的示例代码
2020/06/11 Python
python 实现图片修复(可用于去水印)
2020/11/19 Python
用python对oracle进行简单性能测试
2020/12/05 Python
CSS3之transition实现下划线的示例代码
2018/05/30 HTML / CSS
Infababy英国:婴儿推车、Travel System婴儿车和婴儿汽车座椅销售
2018/05/23 全球购物
Juicy Couture Beauty官方网站:香水和化妆品
2019/03/12 全球购物
纽约州一群才华横溢的金匠制作而成:Hearth Jewelry
2019/03/22 全球购物
C#面试常见问题
2013/02/25 面试题
Linux开机引导的步骤是什么
2015/10/19 面试题
诚信贷款承诺书
2014/05/30 职场文书
党员三严三实对照检查材料
2014/10/13 职场文书
八年级英语教学反思
2016/02/15 职场文书
Python实战之实现简易的学生选课系统
2021/05/25 Python