axios框架的详细知识点大全

一.安装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