axios post body参数_09-axios
1. 简介
1.1 什么是axios
axios是一个基于Promise的Http库,可以用在node.js环境和浏览器中
1.2 功能特点
- 在浏览器中发送XMLHttpRequests
- 在node.js中发送Http请求
- 支持Promise
- 拦截请求和响应
- 转换请求数据和响应数据
- 取消请求
- 自动转换json数据
- 客户端支持防御XSRF
1.3 安装
这里就简单的介绍一种安装方式:npm安装
npm install axios
还是其他两种方式:bower安装和cdn安装
2. axios的基本使用
2.1 发送get 请求
import axios from 'axios'//第一种方式
axios.get("http://127.0.0.1:8000/home/data?type=sell&page=1").then(res=>{console.log(res)
}).catch(err=>{console.log(err)
})//第二种方式
axios.get("http://127.0.0.1:8000/home/data",{params:{type:'sell'page:1 }}).then(res=>{console.log(res.data)}).catch(err=>{console.log(err)})
2.2 发送post请求
import axios from 'axios'axios.post("http://127.0.0.1:8000/home/data",{id:1,username:'zhangsan',age:18}).then(res=>{console.log(res)
}).catch(err=>{console.log(err)
})
2.3 发送并发请求
有时候我们可能需要同时发送多个请求来获取结果,此时就可以使用axios.all([]),可以放入多个请求的数组
axios.all([])返回的是一个数组对象
import axios from 'axios'axios.all([axios.get("http://127.0.0.1:8000/home/multidata"),axios.get("http://127.0.0.1:8000/home/data",{params:{type: 'sell',page:1}})]).then(res=>{console.log(res[0]);console.log("======================");console.log(res[1]);})
3. 默认设置
我们可以设置一些默认设置,这些设置将在以后每次的请求中生效。比如我们的请求路径、请求头参数等等
axios.defaults.baseURL = 'http://127.0.0.1:8100/test';axios.defaults.headers.contentType = "application/json;charset=UTF-8";axios.defaults.headers.common['Authorization'] = 'AUTH_TOKEN'
4. axios实例
4.1 为什么要创建axios实例
当我们从axios模块中导入对象时,使用的实例时默认实例。当给该实例设置一些默认的配置时,这些配置就被固定下来了。但是,当后续开发中,某些配置可能不一样。比如,某些请求需要特定的baseURL或者请求头参数等,这个时候,我们就需要创建新的实例,并且传入属于该实例的配置信息。
4.2 基本使用
import axios from 'axios'//创建axios实例
const axiosInstance = axios.create({baseURL:'http://127.0.0.1:8100',headers:{'Content-Type':'application/json'}timeout:5000})//使用axios实例发送请求
axiosInstance.get('/data',{params:{type:'sell',page:2}})
4.3 axios封装
我们可以在一个单独的js文件中,封装很多个axios实例,然后导出方便在项目开发中应对不同的需求而需要的不同axios实例。
5. 拦截器
5.1 使用
axios提供了拦截器,用于我们在发送每次请求或者得到响应后,进行对应的处理。
配置请求和响应拦截:
import axios from 'axios';/*** 封装axios* @param config* @returns {AxiosPromise}*/
export default function request(config) {const instance = axios.create({baseURL: 'http://127.0.0.1:8100/test',timeout: 5000});instance.interceptors.request.use(config=>{console.log('请求成功的拦截器中');return config},error => {console.log('请求错误的拦截器中');return error;})instance.interceptors.response.use(config=>{console.log('响应成功的拦截器中');return config;},error => {console.log('响应失败的拦截器中');return error;})return instance(config);}
在其他组件中使用:
import request from './network/request';request({url:'/user',method:'post',data:{id:1,username:'lisi',age:19}}).then(res=>{console.log(res);}).catch(err=>{console.log(err);})
结果:
5.2 作用
- 请求拦截中可以做的事
- 当发送网络请求时,可以在页面中添加一个loading组件,作为动画
- 某些请求要求用户登录,判断用户是否有token,没有token则跳转到登录页面
- 对请求的参数进行序列化
- 响应拦截中可以做的事
- 在成功的响应中可以对数据进行过滤
- 在失败的响应中可以根据status判断报错的错误状态码来跳转到不同的错误提示页面
axios post body参数_09-axios相关推荐
- axios post body参数_Vue开发中的一些问题(axios封装)
关于Vue开发的问题(axios封装) 在博客中查找vue的axios封装,发现其中案例还是很多的,自己项目中有些需求不够. 比如 1.Content-Type 请求头 application/x-w ...
- axios get 某个参数是数组怎么传_Vue 中 Axios 的封装和 API 接口的管理
我们所要的说的axios的封装和api接口的统一管理,其实主要目的就是在帮助我们简化代码和利于后期的更新维护. 一.axios的封装 在vue项目中,和后台交互获取数据这块,我们通常使用的是axios ...
- 超级详细的教程 一步步教你Vue项目中使用axios如何进行参数拼接
文章目录 一.Vue 中的网络请求 二.axios的引入 三.常用网络请求方式 1.get A.字符串拼接方式: B.通过params属性传递对象: C.路径拼接方式: D.无请求参数: 2.post ...
- axios post body参数_vue之axios封装
在vue项目中,和后台交互获取数据这块,我们通常使用的是axios库,它是基于promise的http库,可运行在浏览器端和node.js中.他有很多优秀的特性,例如拦截请求和响应.取消请求.转换js ...
- Vue项目中使用axios如何进行参数拼接
一.Vue 中的网络请求 在Vue.js中发送网络请求本质还是Ajax,我们可以使用插件方便操作. ①vue-resource:Vue.js的插件,已经不维护,不推荐使用. ②axios:不是vue的 ...
- axios delete传递参数方式
vue中axios 的delete和post,put在传值上有点区别 post和put有三个参数,url,data和config,所以在使用这两个时,可以写成axios.post(api,{id:1} ...
- axios传递数组参数
axios传递数组参数 最近一个练手vue项目,选择axios作为网络请求库. 后台一接口使用了数组作为参数.本以为没什么,实则遇到了一个大坑. axios.post(url,{ids: [1,2,3 ...
- axios请求接口http_Vue使用Axios实现http请求以及解决跨域问题
Axios 是一个基于 promise 的 HTTP 库,可以用在浏览器和 node.js 中.Axios的中文文档以及github地址如下: 中文:https://www.kancloud.cn/y ...
- axios create拦截_Vue学习-axios
功能特点 在浏览器中发送XMLHttpRequests请求 在node.js 中发送http请求 支持Promise API 拦截请求和响应 转换请求和响应数据 安装 npm install axio ...
最新文章
- WPF中的容器控件——Grid
- Ollydbg 常用快捷键
- 这里有 40 本 Python 书等你来领取!(任选)
- SAP 电商云 Spartacus 5_0.md 迁移文档的编写格式
- java opencv磨皮算法_使用OPENCV简单实现具有肤质保留功能的磨皮增白算法
- mysql插入另一个表中数据_MySql中把一个表的数据插入到另一个表中的实现
- C++调用Python函数
- 【C++深度剖析教程15】经典问题解析之关于string的疑问
- SQLITE3 使用总结(2)[ZT]
- android手机导入.cer证书文件的方法
- 功能测试用例设计方法分享
- word转化为pdf android,如何将Word转化为PDF?
- python实战-爬取斗鱼所有颜值主播头像
- 5点滑动平均公式推导
- 【​观察】六脉神剑第一式-高效之唯快不破
- php 支持zip解压缩,PHP自带ZIP压缩、解压缩类ZipArchiv使用指南
- python解释器环境中用于表示上一次运算结果的特殊变量_Python语句print(type(1//2))的输出结果是...
- U9二次开发之BP定时任务插件开发
- 从重大漏洞应急看云原生架构下的安全建设与安全运营(下)
- /.bash_profile 到底在哪里 (Macbook)
热门文章
- html egg mac os 10.7,HTML Egg
- C语言棋盘中的正方形,C语言DFS(4)____棋盘问题
- 涨姿势了!22 个拓展程序员技术与视野的国外网站,快添加进收藏夹!
- Windows 中进程的相关操作
- Java 8大原子操作
- Rancher Docker容器管理CPU/内存/网络/IO监控面板
- 【视频】vue插值表达式之字符串的反转
- docker 容器重命名
- RabbitMQ消费消息幂等性问题
- python 消息队列如何接收处理_python使用消息队列RabbitMq(进阶)