React axios

React axios

• 参考：王红元老师的React
• Vuejs 网络模块封装_baidu_41388533的博客-CSDN博客

axios的基本使用

• 直接导入axios进行使用：

axios({
  url: "https://httpbin.org/get",
  params: {
    name: "why",
    age: 18
  }
}).then(res => {
  console.log(res);
}).catch(err => {
  console.error(err);
});

• post请求：

axios({
  url: "https://httpbin.org/post",
  data: {
    name: "kobe",
    age: 40
  },
  method: "post"
}).then(res => {
  console.log(res);
}).catch(err => {
  console.error(err);
})

• axios发送get/post

axios.get("https://httpbin.org/get", {
  params: {
    name: "lilei",
    age: 30
  }
}).then(console.log);


axios.post("https://httpbin.org/post", {
  name: "lucy", 
  age: 28
}).then(console.log);
axios.request({
})

• await async （await 外部的函数加上async ）

try {
  const result = await axios.get("https://httpbin.org/get", {
    params: {
      name: "lilei",
      age: 30
    }
  });
  console.log(result);
} catch(err) {
  console.log(err);
}

• axios函数、get、post请求本质上都是request请求

• axios.all

const request1 = axios({
  url: "/get",
  params: {name: "why", age: 18}
})
const request2 = axios({
  url: "/post",
  data: {name: "kobe", age: 40},
  method: "post"
})
axios.all([request1, request2]).then(([res1, res2]) => {
  console.log(res1, res2);
});

axios的配置信息

• 1.请求配置选项
• 2.响应结构信息
• 3.全局默认配置

• 4.自定义实例默认配置： 

优先是

• 请求的config参数配置；
• 其次是实例的default中的配置；
• 最后是创建实例时的配置；

const instance1 = axios.create({
  baseURL: "http://coderwhy.xyz",
  timeout: 5000,
  headers: {
  }
})
const instance2 = axios.create({
  baseURL: "http://baidu.xyz",
  timeout: 10000,
  headers: {
  }
})

axios拦截器

• axios库有一个非常好用的特性是可以添加拦截器：
• 请求拦截器：在发送请求时，请求被拦截；
  • 发送网络请求时，在页面中添加一个loading组件作为动画；
  • 某些网络请求要求用户必须登录，可以在请求中判断是否携带了token，没有携带token直接跳转到login页面；
  • 对某些请求参数进行序列化；
• 响应拦截器：在响应结果中，结果被拦截；
  • 响应拦截中可以对结果进行二次处理（比如服务器真正返回的数据其实是在response的data中）；
  • 对于错误信息进行判断，根据不同的状态进行不同的处理；

axios.interceptors.request.use(config => {
  // 1.发送网络请求时, 在界面的中间位置显示Loading的组件
  // 2.某一些请求要求用户必须携带token, 如果没有携带, 那么直接跳转到登录页面
  // 3.params/data序列化的操作
  console.log("请求被拦截");
  return config;
}, err => {
});


axios.interceptors.response.use(res => {
  return res.data;
}, err => {
  if (err && err.response) {
    switch (err.response.status) {
      case 400:
        console.log("请求错误");
        break;
      case 401:
        console.log("未授权访问");
        break;
      default:
        console.log("其他错误信息");
    }
  }
  return err;
});

为什么要二次封装？

• 为什么我们要对axios进行二次封装呢？
  • 默认情况下我们是可以直接使用axios来进行开发的；
  • 但是我们考虑一个问题，假如有100多处中都直接依赖axios，突然间有一天axios出现了重大bug，并且该库已经不再维护，这个时候你如何处理呢？
  • 大多数情况下我们会寻找一个新的网络请求库或者自己进行二次封装；
  • 但是有100多处都依赖了axios，方便我们进行修改吗？我们所有依赖axios库的地方都需要进行修改；
• axios二次封装示例：

• config.js

const devBaseURL = "https://httpbin.org";
const proBaseURL = "https://production.org";
export const BASE_URL = process.env.NODE_ENV === 'development' ? devBaseURL: proBaseURL;

export const TIMEOUT = 5000;

• request.js

import axios from 'axios';

import { BASE_URL, TIMEOUT } from "./config";

const instance = axios.create({
  baseURL: BASE_URL,
  timeout: TIMEOUT
});

instance.interceptors.request.use(config => {
  // 1.发送网络请求时, 在界面的中间位置显示Loading的组件

  // 2.某一些请求要求用户必须携带token, 如果没有携带, 那么直接跳转到登录页面

  // 3.params/data序列化的操作
  console.log("请求被拦截");

  return config;
}, err => {

});

instance.interceptors.response.use(res => {
  return res.data;
}, err => {
  if (err && err.response) {
    switch (err.response.status) {
      case 400:
        console.log("请求错误");
        break;
      case 401:
        console.log("未授权访问");
        break;
      default:
        console.log("其他错误信息");
    }
  }
  return err;
});

export default instance;

• 使用：

import request from './service/request';


 request({
  url: "/get",
  params: {
    name: "why",
    age: 18
  }
}).then(console.log)