axios (study notes of teacher codewhy)

Why choose axiox

Recommended by the author, light weight.

Features

1. Send XMLHttpRequests requests in the browser
2. Send http request in node.js
3. Support Promise API
4. Intercept request and response
5. Convert request and response data
6. …

use

First install npm install axios --save

Then you can use import axios from "axios" after import;

Send concurrent requests

Put the request result into an array

Store request results separately

axios package

// 方法一
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);
}

Intercept

1. Request interception
2. Response interception

// 拦截
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);
}