axios请求相关知识（附实例）

什么是 axios？

Axios 是一个基于 promise 的 HTTP 库，可以用在浏览器和 node.js 中

在vue项目中导入axios

在终端用npm install --save axios进行安装

安装之后在要使用的页面组件中进行引入

import axios from 'axios'

特性

:从浏览器中创建 XMLHttpRequests
:从 node.js 创建 http 请求
:支持 Promise API
:拦截请求和响应
:转换请求数据和响应数据
:取消请求
:自动转换 JSON 数据
:客户端支持防御 XSRF

axios基本使用

//1.axios基本使用
import axios from 'axios'
axios({
	url:'你的路径',//请求接口
	method:'get'//请求方式：get
}).then(res =>{
	console.log(res);//成功后在控制台输出结果
})

axios发送并发请求

//2.axios发送并发请求
import axios from 'axios'
axios.all([axios({
	url: 'http://123.207.32.32:8000/home/multidata'//路径1
}), axios({
	url: 'http://123.207.32.32:8000/home/data',//路径2

	//专门针对get的请求参数
	params: {
		types: 'sell',
		page: 5
	}
})]).then(results => {//两个请求都得到数据后才根据结果得到数据
	console.log(results);
})

使用全局的axios以及配置进行网络请求

//3.使用全局的axios以及配置进行网络请求
import axios from 'axios'
axios.defaults.baseURL = 'http://123.207.32.32:8000'//全局的基础路径
axios.defaults.timeout = 5000//超时配置
axios.all([axios({
	url: '/home/multidata'//路径1
}), axios({
	url: '/home/data',//路径2
	//专门针对get的请求参数
	params: {
		types: 'sell',
		page: 5
	}
})]).then(results => {
	console.log(results);
})

创建对应的axios实例

//4.创建对应的axios实例
import axios from 'axios'
const instance1 = axios.create({      //instance1为创建的axios实例
	baseURL: 'http://123.207.32.32.8000',
	timeout:5000
})
instance1({
	url:'/home/multidata'
}).then(res =>{
 	console.log(res);
})

封装request模块

request.js文件（定义函数，对request进行封装）：

//5.封装request模块
import axios from 'axios'
export function request(config,success,failure) {
	//创建axios实例
	const instance = axios.create({
		baseURL:'http://152.136.185.210:7878/api/m5',
		timeout:5000
	})
	//发送真正的网络请求
	//return instance(config)
	instance(config)
	.then(res =>{
		success(res);
	})
	.catch(err=>{
		failure(err)
	})
}

main.js文件（导入request.js调用request）：

import axios from 'axios'
import {request} from "./network/request.js";
request({
	url: '/home/multidata'
}, res => {
	console.log(res);
}, err => {
	console.log(err);
})

axios拦截器

请求拦截

	//2.1请求拦截的作用
	instance.interceptors.request.use(config=>{
		console.log(config);
			//2.1.1比如config的一些信息不符合服务器要求
			//2.1.2比如每次发送网络请求时，都希望在界面中显示一个请求图标
			//2.1.3某些网络请求（如登录请求（token）），必须携带一些特殊信息
		return config//拦截过后还要返回，否则数据被拦截
	},err => {
		console.log(err);
	})

响应拦截

	//2.2响应拦截
	instance.interceptors.response.use(res =>{
		console.log(res);
		return res.data;//返回得到数据里想要的部分
	},err => {
		console.log(err);
	})