网络请求axios
axios的定义
- axios是一个基于Promise,用于浏览器和node的HTTP客户端
axios的功能特点
- 在浏览器中发送 XMLHttpRsquests 请求
- 在node.js中发送http请求
- 支持Promise API
- 拦截请求和响应
- 转换请求和响应数据
- 等等
axios框架的基本使用
- npm安装
npm install axios -S
发送pos请求的简单演示
axios({
url: 'http://123.207.32.32:8000/home/multidata',
method: 'pos'
}).then(res => console.log(res))
axios的请求参数
- baseURL:请求的根路径
baseURL = 'http://123.207.32.32:8000'
- timeout:请求超时时间
timeout = 5000
- method:发送请求所使用的方法,默认使用get方法
method = 'get'
- params:URL查询对象
params = {type: 'pop',page: 1}
发送并发请求
- axios.all(),接收一个数组作为参数,返回一个promise对象
- 使用axios.spread可将数组[res1, res2]展开为res1,res2
axios.all([
axios({url: '/home/multidata'}),
axios({url: '/home/data', params: {type: 'pop',page: 1}})
]).then(axios.spread(res1, res2) => {
console.log(res1)
console.log(res2)
})
创造axios实例将全局配置改为局部配置
- 调用create方法,该方法会返回一个axios实例,该实例同样会返回一个Promise对象
const instance1 = axios.create({
baseURL: 'http://123.207.32.32:8000',
timeout: 500
})
instance1({
url: '/home/multidata'
}).then(res => console.log(res))
网络模块封装
- 将网络相关信息单独放入一个文件中,导出函数
//request.js
import axios from 'axios'
export function request(config) {
const instance = axios.create({
baseURL: 'http://123.207.32.32:8000',
timeout: 5000
})
// 拦截器
// ……
return instance(config)
}
- 使用
import {
request
} from './network/request.js'
request({
url: '/home/multidata'
}).then(res => console.log(res))
.catch(err => console.log(err))
axios拦截器
- axios提供了拦截器,用于我们在每次发送请求或得到响应后,进行对应的处理
export function request(config) {
// 1.创建做axios实例
const instance = axios.create({
baseURL: 'http://123.207.32.32:8000',
timeout: 5000
})
- 请求拦截
axios.interceptors.request.use(config => {
console.log(config)
// 1.比如config中的一些不符合服务器的要求
// 2.比如每次发送网络请求时,都希望在界面中显示一个请求的图标
// 3.某些网络请求(比如登录),必须携带一些特殊的信息
// 必须要返回拦截的对象
return config
}, err => {
return err
})
- 响应拦截
instance.interceptors.response.use(res => {
// console.log(res)
return res.data
}, err => {
console.log(err)
return err
})
//3、发送真正的网络请求
return instance(config)
网络请求axios的更多相关文章
- 使用axios优雅的发起网络请求
原文链接:https://www.jianshu.com/p/73585303fdc0 公司项目使用了vue作为技术栈,便理所应当地使用了官方推荐的axios进行网络请求,这里记录下axios的封装方 ...
- Axios 网络请求组件封装 (鉴权、刷新、拦截)
一.前言 注意:本教程需要你对axios有一定的了解,不适用于小白(只能借鉴,希望你能自己动手),注释都写的很清楚.此封装并非完整版,已进行部分删减修改操作,但仍然适用于大部分业务场景,如果不适用于你 ...
- 十. Axios网络请求封装
1. 网络模块的选择 Vue中发送网络请求有非常多的方式,那么在开发中如何选择呢? 选择一:传统的Ajax是基于XMLHttpRequest(XHR) 为什么不用它呢?非常好解释配置和调用方式等非常混 ...
- vue(24)网络请求模块axios使用
什么是axios Axios 是一个基于 promise 的 HTTP 库,可以用在浏览器和 node.js 中. 主要的作用:axios主要是用于向后台发起请求的,还有在请求中做更多是可控功能. a ...
- React Native网络请求
很多移动应用都需要从远程地址中获取数据或资源.你可能需要给某个REST API发起POST请求以提交用户数据,又或者可能仅仅需要从某个服务器上获取一些静态内容--以下就是你会用到的东西.新手可以对照这 ...
- Spring Boot + Vue 前后端分离开发,前端网络请求封装与配置
前端网络访问,主流方案就是 Ajax,Vue 也不例外,在 Vue2.0 之前,网络访问较多的采用 vue-resources,Vue2.0 之后,官方不再建议使用 vue-resources ,这个 ...
- web开发网络请求到数据的整合办法
开发中向服务器请求到的数据是特别复杂的,需要从中抽离出需要展示的数据进行展示个和交互. 思路: 先将请求到的复杂数据传递到一个类A中,从类A里抽离出需要的数据.需要展示数据的地方,面向类A开发,类A关 ...
- Jest中Mock网络请求
Jest中Mock网络请求 最近需要将一个比较老的库修改为TS并进行单元测试,修改为TS还能会一点,单元测试纯粹是现学现卖了,初学Jest框架,觉得在单元测试中比较麻烦的就是测试网络请求,所以记录一下 ...
- 介绍一下主流的浏览器的开发者工具(js调试和查看网络请求)
1.打开开发者工具:右键-->检查 (快捷键 f12) 2.开发者工具介绍: (1): 选择页面的dom进行查看 (2):设备适配 (3)元素: ① 可以查找到界面对应的dom: ② 通过计算样 ...
随机推荐
- Java 操作PPT数字签名(一):添加、检测、删除签名
本文简要概述如何通过Java程序来处理PPT中的数字签名,文章主要分三个部分来介绍,即数字签名的添加.验证以及删除. 基本操作思路: 1. 添加签名:[加载PPT文档]→[添加签名]→[保存文档] 2 ...
- 为科学计算而生的Julia——基于Manjaro Linux的安装与入门
技术背景 Julia是一门为科学计算而生的编程语言,其着重强调了开源.生态与性能.从开源角度来说,相比于Matlab就要友好很多,用户可以免费使用,而且MIT协议应该是最宽松的开源协议之一(截图来自于 ...
- 服务器安装部署-01-MySQL
1 MySQL 1.1 安装 在root用户权限下 # 创建mysql用户和用户组,同时禁止登陆 shell> groupadd mysql shell> useradd -r -g my ...
- AppDomain实现【插件式】开发
前言: 近期项目中需要实现"热插拔"式的插件程序,例如:定义一个插件接口:由不同开发人员实现具体的插件功能类库:并最终在应用中调用具体插件功能. 此时需要考虑:插件执行的安全性(隔 ...
- vue-router 监控全局路由,在路由中改变vuex中的状态值
- 连续函数离散化-以SOGI为例
0. 引言 0.1 本文内容 基于SOGI函数,将s域传递函数转换为离散的z域函数,并以m语言形式进行实现,在simulink中封装为m-function并进行验证 0.2 学到什么 离散化方法 函数 ...
- java面试-强引用、软引用、弱引用和幻象引用有什么区别
在Java语言中,除了基本数据类型外,其他的都是指向各类对象的对象引用:Java中根据其生命周期的长短,将引用分为4类. 不同的引用类型,主要体现的是对象不同的可达性状态和对垃圾收集的影响. 1 .强 ...
- 1-Hyperledger Fabric概念详解
目录 一.Hyperledger Fabric概述 二.基本术语 1.共享账本ledger 2.通道Channel 3.组织Org 4.智能合约Chaincode 5.背书Endorse 6.各种节点 ...
- SimpleDateFormat一定是线程不安全吗?
今天一位优秀的架构师告诉我,下面这段代码SimpleDateFormat是线程不安全的. /** * 将Date按格式转化成String * * @param date Date对象 * @param ...
- Spring Cloud Alibaba(2)---RestTemplate微服务项目
RestTemplate微服务项目 前言 因为要运用 Spring Cloud Alibaba 开源组件到分布式项目中,所以这里先搭建一个不通过 Spring Cloud只通过 RestTemplat ...