axios笔记

axios笔记

这是我在学习axios时做的一些笔记，可以参考

axios是在前后端对接时，用来处理网络请求什么时用的

一.axios官网

这一部分内容主要参考axios官网教程内容

起步 | Axios 中文文档 | Axios 中文网 (axios-http.cn)

1.简介

axios是一个基于promise的网络请求库，可以用于浏览器和node.js

promise用于处理一些需要花费长时间的任务，进行异步处理，防止任务阻塞。一般是说解决了回调地狱的问题。

Node.js是一个服务器端的、非阻断式I/O的、事件驱动的JavaScript运行环境，能够使得javascript脱离浏览器运行。

XMLHttpRequest（XHR）对象用于与服务器交互。通过 XMLHttpRequest 可以在不刷新页面的情况下请求特定 URL，获取数据。这允许网页在不影响用户操作的情况下，更新页面的局部内容。XMLHttpRequest 在 AJAX 编程中被大量使用。

2.用例

差不多只能看懂这么些 qwq
后来又去b站找了个视频看

二.react+axios

以下内容参考b站视频

1.前言

在进行开发时，我们往往需要发送网络请求，和服务器进行交互，与后端对接，来实现功能更强大的产品

在前端中有几种网络请求的选择：

1.传统的Ajax，是基于XHP的

但是用起来体验并不好，一般是使用jQuery-Ajax

2.jQuery-Ajax

用起来好一点，但会有点麻烦

3.Fetch API

Fetch是AJAX替换方案，基于Promise设计

可能也会有一定的缺点

4.axios

是前端使用非常广泛的网络请求库，Vue作者也推荐在vue中使用axios

在浏览器发送XMLHttpRequests请求、在Node.js中发送http请求、支持Promise API、拦截请求和响应、转换请求和相应数据等等

2.基本使用

http://httpbin.org/ 可以用这个网站来测试网络请求

一般用的最多的网络请求是get和post请求

---

在这里插入一个react小知识点，一般index文件作为初始页面，可以引入外部组件

具体引入方法是：

//index.jsx
import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App';

const root = ReactDOM.createRoot(document.getElementById("root"));
  root.render(<App />);
//App.jsx
export default class App extends PureComponent{
    ......
    render(){
        return(......)
    }
}

这样就引入并渲染了外部的App组件

---

2.1用axios发送get和post请求

     componentDidMount(){
        //一般是在这里面发送网络请求，获取数据修改进state里面，然后再在render里面调用
        // this.setState({
        //     products: [...this.state.products,...res],
        // })


        //axios发送基本网络请求get请求
        axios({
            url:'http://httpbin.org/get',    //网络请求地址
            params:{                    //自动拼接到url的后面
                name: 'why',
                age: 18,
            }                      //默认是get请求//最终返回Promise
        }).then(res=>{              //请求成功会进then里面
            console.log(res);
        }).catch(err=>{              //拒绝会进这里
            console.error(err);
        });     
        
        //axios 发送post请求
        axios({
            url:'http://httpbin.org/post',
            data:{
                name : 'wzss',
                age: 19,
            },
            method: 'post'
        }).then(res=>{
            console.log(res);
        }).catch(err=>{
            console.error(err);
        })

//也可以这么写get请求
        axios.get('http://httpbin.org/get',{
            params:{
                name: 'zzyy',
                age: 3,
            }
        }).then(console.log);        //可以直接写console.log  //一般不这么写，因为要处理数据

//也可以这么写post请求
        axios.post('http://httpbin.org/post',{
            name: 'jack',
            age: 25,
        }).then(console.log);
    }

用到了React生命周期的相关知识

生命周期函数 componentDidMount() , 即在组件加载完成，render() 之后调用，这个方法只会触发一次

可以在这个函数内进行网络请求等等，对数据进行处理，修改入state等等操作

不同需求可以查找使用不同的生命周期函数

效果：

2.2使用await async关键字

async componentDidMount(){
	try{
        const result=await axios.get('http://httpbin.org/get',{
            params:{
                name: 'zzyy',
                age: 3,
            }
        });
        console.log(result);
    }catch(err){
        console.log(err);
    }
}

这样也能进行get和post请求

2.3处理多个请求

用axios.all()可以同时处理多个请求

    const request1=axios({
        url: 'http://httpbin.org/get',
        params: {
            name: 'why',
            age: 18,
        }
    })
    const request2=axios({
        url:'http://httpbin.org/post',
        data:{
            name: 'wzss',
            age: 19,
        },
        method: 'post',
    })

        //将多个请求合并
    axios.all([request1,request2]).then(res=>{
        console.log(res);
    }).catch(err=>{
        console.log(err);
    })

//或者这么写
        //将多个请求合并
    axios.all([request1,request2]).then(([res1,res2])=>{
        console.log(res1,res2);
    }).catch(err=>{
        console.log(err);
    })

3.axios的配置信息

有很多的配置选项

可以去官网查找等等

网络请求成功后的返回数据，一般是用res.data进行获取

axios的默认配置

可以写默认的配置，提高代码复用

//默认配置 在index.jsx中写
axios.defaults.baseURL="http://httpbin.org";
axios.defaults.timeout=5000;
axios.defaults.headers.common['token']='dafdaafdafdaf';
axios.defaults.headers.post['Content-Type']='application/text';

4.创建新的实例

const instance1=axios.creat({…})

const instance2=axios.creat({…})

可以响应多个服务器

5.axios拦截器

进行请求拦截或者响应拦截

        axios.interceptors.request.use(config=>{   //请求拦截成功进入这个
            //1.发送网络请求时，在页面中间显示loading的组件
            //2.某一些请求，要求用户必须携带token，如果没有携带，那么直接跳转到登陆页面
            //3.params/data需要序列化操作
            
            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.get('http://httpbin.org/get',{
            params:{
                name: 'wzss',
                age: 19,
            }
        }).then(res=>{
            console.log(res);
        }).catch(err=>{
            console.log(err);
        })
    }

6.在真实开发中的处理

进行二次封装，减少项目对axios的依赖性，好处是假如axios出现问题，便于修改

新建request.js

import axios from 'axios';
import { BASE_URL, TIMEOUT } from './config';


//工具文件  进行封装
const instance = axios.create({
    baseURL: BASE_URL,
    timeout: TIMEOUT,
})

//添加拦截器
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;

新建config.js进行相关的配置

//相关的配置信息

const devBaseUrl = 'http....';
const proBaseUrl = 'http....';
export const BASE_URL = process.env.NODE_ENV === 'development' ? devBaseUrl : proBaseUrl;
export const TIMEOUT = 5000;

在app.jsx里

import requset from './service/request';

        requset.get('http://httpbin.org/get',{
            params:{
                name: 'wzss',
                age: 19,
            }
        }).then(res=>{
            console.log(res);
        }).catch(err=>{
            console.log(err);
        })

这样就可以了

三.总结

之前没学过axios，这两天大致学了一下基本操作，有了一定理解，但是对于服务器、网络请求什么的还是一知半解，如何将前端和后端联系起来还是不太明白，可能还要把数据库、服务器什么的学完，才能有一个整体的理解吧，暑假估计是没太多时间仔细学了，等大二再仔细学一学mysql什么的吧

路漫漫其修远兮，加油加油！