一.安装axios框架
在vue项目中通过npm install axios --save
进行安装
二.axios的基本使用
1.如果在axios中没有特指method是post还是get,会默认为get请求
axios({
url:'www.baidu.com',
}).then(res => {
console.log(res)
})
2.如果url地址尾部带有参数,可以使用专门针对get请求的参数拼接:params
axios({
url:'www.baidu.com',
params:{ // params:专门针对get请求的参数拼接,会以?的形式拼接到url的后面
type:'pop',
page:1
}
}).then(res => {
console.log(res)
})
params:专门针对get请求的参数拼接,会以?的形式拼接到url的后面
3.如果method是post请求,要把参数放在data里
三.axios发送并发请求
同时发送多个请求,当都收到结果时,再去完成对应的事情
使用axios.all()方法来实现,该方法中存一个数组
axios.all([
axios({
url:'www.baidu.com',
}),
axios({
url:'www.baidu.com',
params:{ // params:专门针对get请求的参数拼接
type:'pop',
page:1
}
})
]).then(results => {
console.log(results)
})
在上述案例中,then方法里的results为一个数组,里面存放着两个网络请求返回的结果.即axios.all([])返回的是一个数组
可以使用axios.spread将数组展开为res1,res2,即
axios.all([
axios({
url:'www.baidu.com',
}),
axios({
url:'www.baidu.com',
params:{ // params:专门针对get请求的参数拼接
type:'pop',
page:1
}
})
]).then(axios.spread((res1,res2) => { // 展开数组
console.log(results)
}))
四.axios的全局配置(最好不要用全局配置)
- 事实上在开发中,可能很多的参数信息都是固定的
- 这个时候我们可以进行一些抽取,也可以利用axios的全局配置
axios.default
axios.default.baseURL = '' // url的请根目录
axios.default.timeout = 5000 // 超时时间为5s
五.创建对应的axios实例(替代全局配置)
const instance1 = axios.create({
baseURL:'http://123.207.32.32:8080',
timeout: 5000
})
instance1({
url:'/home/multidata',
}).then(res => {
console.log(res)
})
六.axios封装
在src文件夹下创建一个network文件夹,只要是涉及到网络层的东西都封装到network文件夹。在其中创建一个reques.js文件。目的在于:方便以后替换网络请求方式时,降低工作量,无需大幅更改
使用函数替代default,因为函数的扩展性比较好
方式一:传入三个参数
import axios from 'axios'
export function request (config,success,failure){ // 传入三个参数
// 1.创建axios实例
const instance1 = axios.create({
baseURL:'http://123.207.32.32:8080',
timeout:5000
})
//发送真正的网络请求
instance1(config){
.then(res => {
success(res)
})
.catch(err => {
failure(err)
})
}
}
在js文件中
import {request} from './network/request'
request({
url:'/home/multidata'
},res => {
console.log(res);
},err => {
console.log(err);
})
方式二:返回Promise对象方法
import axios from 'axios'
export function request (config){
// 1.创建axios实例
const instance1 = axios.create({
baseURL:'http://123.207.32.32:8080',
timeout:5000
})
//发送真正的网络请求
return instance1(config) // axios实例中自带Promise对象,此处返回Promise对象
request({
url:'/home/multidata'
}.then(res => {
console.log(res);
}).catch(err => {
console.log(err);
})
七.axios的拦截器使用
axios提供了拦截器,用于我们在每次发送请求或者得到响应后,进行对应的处理
import axios from 'axios'
export function request (config){
// 1.创建axios实例
const instance = axios.create({
baseURL:'http://123.207.32.32:8080',
timeout:5000
})
// 2.axios的拦截器
// 2.1请求拦截的作用
instance.interceptors.request.use(config => {
console.log(config)
return config // 拦截之后一定要返回
// 1.比如config中的一些信息不符合服务器的要求
// 2.比如每次发送网络请求时,都希望在页面中显示一个请求图标
// 3.某些网络请求(比如登陆(token)),必须携带一些特殊信息
},err => {
console.log(err)
})
// 2.2 响应拦截
instance.interceptors.response.use(res => {
console.log(res)
return res.data // 数据存在data中
// 1.比如config中的一些信息不符合服务器的要求
// 2.比如每次发送网络请求时,都希望在页面中显示一个请求图标
// 3.某些网络请求(比如登陆(token)),必须携带一些特殊信息
},err => {
console.log(err)
})
// 3.发送真正的网络请求
return instance1(config)
- 若成功拦截后,必须要返回参数,即
return 参数
- 请求拦截时,第一个参数为config
- 响应拦截时,第一个参数为res