20 React学习笔记.axios网络请求

使用axios发送网络请求

一. 发送网络请求方式

传统的Ajax基于XMLHttpRequest（XHR）
jQuery-Ajax，jQuery项目太大，个性化打包又不能享受CDN。
Fetch API

基于原生XHR，是AJAX的替代方案，基于Promise设计，很好的进行了关注分离。
Fetch是底层API，需要手动配置功能和实现。
发送网络请求：手动配置Header的Content-Type，不会默认携带cookie等。
错误处理相对麻烦，只有网络错误才会reject，HTTP状态码404或500不会被标记为reject。
不支持取消请求，也不能查看请求的进度。

axios：ajax i/o system

咋子浏览器发送XMLHttpRequests请求，在node.js中发送http请求，支持Promise API，支持拦截请求和响应，转换请求和响应数据等等。

二. axios

image.png

在生命周期函数componentDidMount中发送网络请求，拿到数据后setState并传给state。hooks之后再谈。
axios()可以直接当作函数使用。

    axios({
      url: "http://httpbin.org/get",
      params: {
        name: "wwq",
        age: 18,
      },
      method: "get"
    }).then(res => {
      console.log(res);

    }).catch(err => {
      console.log(err);
    });

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

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

axios发送网络请求的几种方式实际上都是在调用axios原型上的request()方法。

var axios = createInstance(defaults);

image.png

三. 新增关键字async & await

取到错误信息：通过try - catch

四. 请求合并 axios.all([])

    const request1 = axios({
      url: "http://httpbin.org/get",
      params:{name:"wwq",age:18}
    })
    const request2 = axios({
      url: "http://httpbin.org/post",
      params:{name:"kobe",age:30},
      method:"post",
    })
    axios.all([request1,request2]).then(([res1,res2])=>{
      console.log(res1, res2);
    }).catch(err=>{})

源码中实际上是Promise.all。

image.png

axios配置选项：

image.png

只有url必传。
baseURL方便url使用。
timeout异步。
没有指定方法则为get。
还有一些关于拦截修改序列化的配置
还有取消请求的配置。
相应结构配置：服务器返回的数据只是data的一部分，需要来解构使用。
请求类型长度之类自动添加，在fetch中需要手动添加。
可以在某个地方对baseURL之类进行默认配置，在index.js中通过axios.defaults进行配置

import React, { PureComponent } from 'react'
import ReactDOM from 'react-dom'
import axios from 'axios'
import App from './App'

axios.dafaults.baseURL ="htttps://httpbin.org"; 
axios.dafaults.timeout = 5000;
axios.dafaults.common["token"] = "dgwgwaggda"; 
axios.dafaults.headers.post["content-Type"] = "application/text"; 

ReactDOM.render(
  <React.StrictMode>
    <App/>
  </React.StrictMode>,
  document.getElementById('root')
);

五.

image.png

调用的函数本质调用的是源码中绑定的实例。
但真正挂载到instance，是在extend的工具函数上。

遇到给不同服务器请求时

有可能通过nginx中转

image.png

如果没有nginx或非要请求不同服务器
通过axios.create()方法创建不同的实例，来针对不同服务器发送网络请求。

image.png
create()方法本质是调用createInstance方法并对参数进行合并。

自定义实例默认配置优先级：

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

六.axios拦截器

在发送请求之前和收到响应之后，可以通过axios.interceptor对其进行拦截。
拦截操作完之后，一定要把config给return出去。

七. axios的二次封装

image.png

对axios二次封装的原因。

多处依赖时方便修改。

import axios from 'axios'

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

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

instance.interceptors.request.use(config => {
  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;