Axios笔记

作用：网络请求数据

学习视频：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);
});