没有比这更简单的axios上手方式了
- axios功能特点
- 在浏览器中发送XMLHttpRequest请求
- 在node.js中发送http请求
- 支持Promise API
- 拦截请求和响应
- 转换请求和响应数据
安装 axios
npm install axios --save
axios 基本使用
import axios from 'axios';
axios({
url: 'http://127.0.0.1:8080/home/multidata',
method: 'get' // 不指定method时: 默认get请求
}).then(res => {
console.log(res);
})
axios 发送并发请求
axios.all([axios({
url: 'url1',
params: {
请求参数1: '参数1',
请求参数2: '参数2'
}
}),axios({
url: 'url2',
params: {
请求参数1: '参数1'
}
})]).then(results => {
console.log(results);
})
/**
发送并发请求,例如这里的两个,
返回的数据results是一个数组
results[0] === url1 的返回数据
results[1] === url2 的返回数据
*/
axios.spread
axios.all([axios({
url: 'url1',
params: {
请求参数1: '参数1',
请求参数2: '参数2'
}
}),axios({
url: 'url2',
params: {
请求参数1: '参数1'
}
})]).then(axios.spread((res1,res2) =>{
console.log(res1)
console.log(res2);
}))
axios配置信息
- 全局配置
- 实际上,开发中可能很多参数都是固定的,比如 url前缀
- 这时候可以进行一些抽取,可以利用axios的全局配置
axios.defaults.baseURL = 'http://127.0.0.0:8080' //设置公共url
axios.defaults.timeout = 5000 //设置请求超时时间,单位毫秒
- 常见配置选项
- 请求地址
- url: '/user'
- 请求类型
- method: 'get'
- 请求根路径
- baseURL: http://127.0.0.0:8080'
- 请求前数据处理
- transformRequest: [function(data){}]
- 请求后数据处理
- transfromResponse: [function(data){}]
- 自定义请求头
- headers: {'x-Requested-With':'XMLHttpRequest'}
- URL查询对象
- parms: {id: 12}
- 查询对象序列化函数
- paramsSerializer: function(params){}
- request body
- data: {key: 'value'}
- 超时设置(单位毫秒)
- timeout: 1000
- 跨域是否携带Token
- wihtCredemtials: false
- 自定义请求处理
- adapter: function(resolve, reject, config)()
- 身份验证信息
- auth: {uname: 'uname', pwd: '123'}
- 响应的数据格式 json/blob/document/arraybuffer/text/stream
- responseType: 'json'
axios 的实例
- 当从axios模块中导入对象时,使用的实例就是默认的实例
- 当给该实例设置一些默认配置时,这些配置就被固定下来了
- 但是后续开发中,某些配置可能会不太一样
- 比如某些请求需要使用特定的 baseURL或者timeout等
- 这个时候,就可以创建新的实例,并且传入属于该实例的配置信息
//使用axios.create创建实例
const instance1 = axios.create({
baseURL: 'http://127.0.0.0:8080', //传入公共接口地址
timeout: 5000 //设置此实例得超时时间
})
//使用实例
instance1({
url: '/home/multidata'
}).then(res =>{
console.log(res);
});
instance1({
url: '/home/data',
params: { //传入请求参数,params是针对于get请求得
type: 'pop',
page: 1
}
}).then(res => {
console.log(res);
})
//如果有其他请求需要用到其他的配置,这时候就可以使用axios.create创建其他实例
封装一个网络请求模块
/**
* /src/network/request.js
config:
这个模块只负责网络请求,对于数据处理交给调用该模块的组件传入的回调函数处理
*/
/**
* /src/network/request.js
*/
import axios from 'axios';
// 封装方式1
// export function request(config) {
// return new Promise(((resolve, reject) => {
//
// //1.创建axios实例
// const instance = axios.create({
// baseURL: 'http://152.136.185.210:8000',
// timeout: 5000
// });
//
// //发送网络请求
// instance(config)
// .then(res => {
// resolve(res);
// })
// .catch(err => {
// reject(err);
// })
// }))
// }
//封装方式2
export function request(config) {
//1. 创建axios实例
const instance = axios.create({
baseURL: 'http://127.0.0.0:8080',
timeout: 5000
})
// 发送网络请求
return instance(config); //他本身的返回值就是一个promise
//所以直接返回它
}
<template>
<div id="app">
<p>{{results}}</p>
</div>
</template>
<script>
import {request} from './network/request'
export default {
name: 'App',
data(){
return {
results: ''
}
},
created() {
//上面两种封装方式不影响这个地方的使用
request({
url: '/home/multidata'
}).then(res =>{
this.results = res;
}).catch(err =>{
console.log(err);
})
}
}
</script>
axios拦截器的使用
- 全局拦截
axios.interceptors.request.use()
- 拦截当前实例
instance.interceptors.request.use
- 拦截器的作用
- 比如config中的一些信息不符合服务器要求
- 比如每次发送网络请求,都希望在界面中显示一个请求的图标
- 某些网络请求必须携带一些特殊信息,比如登陆 token
- 请求拦截 instance.interceptors.request.use
export function request(config) {
//1. 创建axios实例
const instance = axios.create({
baseURL: 'http://152.136.185.210:8000',
timeout: 5000
})
//请求拦截
instance.interceptors.request.use(config => {
//console.log(config);
//必须返回config
return config;
}, err => {
//console.log(err);
})
//响应拦截
instance.interceptors.response.use(res => {
console.log(res);
return res.data;
}, err => {
console.log(err);
})
// 3. 发送网络请求
return instance(config);
}
