axios（codewhy老师学习笔记）

为什么选择axiox

作者推荐，量级轻。

功能特点

1. 在浏览器中发送XMLHttpRequests请求
2. 在node.js中发送http请求
3. 支持Promise API
4. 拦截请求和响应
5. 转换请求和响应数据
6. …

使用

首先安装 npm install axios --save

然后即可引入后使用 import axios from “axios”;

发送并发请求

将请求结果放到一个数组里面

将请求结果分开存放

axios封装

// 方法一
export function request(config, success, failure) {
  const instance = axios.create({
    baseURL: "http://123.207.32.32:8000",
    timeout: 5000,
  })
  instance(config)
    .then((res) => {
      // console.log(res);
      success(res);
    })
    .catch((res) => {
      failure(res);
    });
}

// 方法二：Promise方法
export function request(config) {
  return new Promise((resolve, reject) => {
    const instance = axios.create({
      baseURL: "http://123.207.32.32:8000",
      timeout: 5000,
    })
    instance(config)
      .then((res) => {
        resolve(res);
      })
      .catch((err) => {
        reject(err);
      });
  })
}

// 方法三
export function request(config) {
  const instance = axios.create({
    baseURL: "http://123.207.32.32:8000",
    timeout: 5000,
  })
  return instance(config);
}

拦截

1. 请求拦截
2. 响应拦截

// 拦截
export function request(config) {
  // 1. 创建axios实例
  const instance = axios.create({
      baseURL: "http://123.207.32.32:8000",
      timeout: 5000,
    })
    // 2. 拦截
    // axios.interceptors.request.use()

  // 请求拦截
  instance.interceptors.request.use(config => {
    console.log(config);
    // 在这里拦截了config，一定要将他返回出去，否则请求会失败
    //  1.config中的一些信息不符合服务器的要求
    // 2. 比如每次发送网络请求的时候，都希望在界面中显示一个请求的图标
    // 3. 某些网络请求(比如登录（token）),必须携带一些特殊的信息
    return config;
  }, err => {
    console.log(err);
  })
  // 响应拦截
  instance.interceptors.response.use(res => {
      console.log(res);
      return res.data;
    }, err => {
      console.log(err);
    })
    // 发送真正的网络请求
  return instance(config);
}