作用：网络请求数据
学习视频：coderwhy老师哔站视频
安装
npm install --save axios
引入(需要使用到axios的文件引入)
import axios from 'axios';
1.基本使用
axios({
url: 'http://123.207.32.32:8000/home/multidata'
}).then(res => {
console.log(res.data);
});
2.定义公共
// 公共定义
axios.defaults.baseURL = 'http://123.207.32.32:8000';
axios.defaults.timeout = 5000;
axios({
url: '/home/multidata'
}).then(res => {
console.log(res.data);
});
3.创建实例(通过axios.create创建)
// 创建实例
const instance = axios.create({
baseURL: 'http://123.207.32.32:8000',
timeout: 3000
});
// 发送网络请求
instance({
url: '/home/multidata'
}).then(res => {
console.log(res.data);
});
4.封装实例
// 导出
export function request(config) {
// 创建实例
const instance = axios.create({
baseURL: 'http://123.207.32.32:8000',
timeout: 3000
});
// 发送网络请求
return instance(config);
};
// 导入
import { request } from 'network/request.js';
request({
url: '/home/multidata'
}).then(res => {
console.log(res.data);
});
5.请求拦截(请求数据时发送拦截)
- 比如config中一些信息不符合服务要求
- 比如每次发送网络请求都需要在界面中显示请求图标
- 比如登录等网络请求token，必须携带一些特殊信息
- 语法：实例.interceptors.request.use(a, b)，参数是两个函数，a代表请求成功，必须返回config；b代表请求失败
// 导出
export function request(config) {
// 创建实例
const instance = axios.create({
baseURL: 'http://123.207.32.32:8000',
timeout: 3000
});
// 请求拦截
instance.interceptors.request.use(config => {
// 必须返回config
return config;
}, err => {
console.log(err);
});
// 发送网络请求
return instance(config);
};
// 导入
import { request } from 'network/request';
request({
url: '/home/multidata'
}).then(res => {
console.log(res.data);
});
6.响应拦截(接收数据时发送拦截)
- 语法：实例.interceptors.response.use(a, b)，参数是两个函数, a代表数据成功，必须返回res；b代表数据失败
// 导出
export function requset(config) {
// 创建实例
const instance = axios.create({
baseURL: 'http://123.207.32.32:8000',
timeout: 3000
});
// 响应拦截
instance.interceptors.response.use(res => {
// 必须返回res
return res;
}, err => {
console.log(err);
});
// 发送网络请求
return instance(config);
};
// 导入
import { request } from 'network/request';
request({
url: '/home/multidata'
}).then(res => {
console.log(res.data);
});
