axios简单介绍

最新推荐文章于 2024-09-14 10:44:30 发布

lq_1999

最新推荐文章于 2024-09-14 10:44:30 发布

阅读量2.4k

点赞数 2

分类专栏： js 文章标签：前端 ajax

本文链接：https://blog.csdn.net/lq_1999/article/details/121496910

版权

js 专栏收录该内容

21 篇文章 0 订阅

订阅专栏

本文详细介绍了axios库的使用，包括GET和POST请求的不同形式，如何配置请求和响应参数，以及如何利用拦截器进行请求前和响应后的处理。此外，还展示了如何取消重复请求，并通过axios.create()创建实例以定制不同请求。最后提到了并发操作的实现。

摘要由CSDN通过智能技术生成

axios是一个基于promise的HTTP库，可以用在浏览器和Node.js中。从浏览器中创建XMLHttpRequest，从Node.js创建http请求；

中文官网：Axios 中文文档 | Axios 中文网

axios GET请求-- 两个参数,（可省略）第二个参数可配置请求和响应参数

1、形式一

        //也可以用url?...的形式向后端发送数据，例如用户id、姓名...
        axios.get('/list?username=james&age=20').then((res)=> {    
            console.log(res);
        });

2、形式二

        axios.get('/list',{
            params: {
                username : 'james',
                age : 30
            }
        }).then((res)=> {
            console.log(res);
        })

axios POST请求 -- 三个参数，（可省略）第二个为发送到后端的数据，（可省略）第三个可配置请求和响应参数

1.形式一 -- 当发送的数据是对象，axios会默认处理为JSON数据

        axios.post('/list2',{
            firstname : 'Mike',
            lastname : 'Jordan'
        }).then((res) => {
            console.log(res);
        })

2、形式二 -- 当发送的数据是字符串类型，axios会以 '名称/值'对的方式发送给后端

        axios.post(
            '/list2',
            'firstname=Mike&lastname=Jordan'
        ).then((res) => {
            console.log(res);
        })

配置请求和响应参数（底层写法）

        axios({
            url : '/list',
            mothed : 'GET',
            params : { usrename : 'james'},
            headers : { 'Content-Type' : 'application/json' },
            data : {
                username : 'james',
                age : 30
            }
        }).then().catch();

高级写法，实现与底层写法相同

get请求

//get方法，两个参数,第二个参数可配置请求和响应参数
        axios.get('/list',{
            params : { },
            headers : { }
        }).then().catch();

post方法

//post方法，三个参数，第二个为发送到后端的数据，（无配置，可不写）第三个可配置请求和响应参数
        axios.post('/list2',{
            firstname : 'Mike',
            lastname : 'Jordan'
        },{
            params : {},
            headers : {}
        }).then().catch();

默认配置参数（全局配置），优先级低于直接配置

        axios.default.params = { age : 20 };

        axios.get('/list',{
            params : { age :30 }
        }).then((res)=> {
            console.log(res);
        });

添加请求拦截器和响应拦截器

示例：

<body>
    <button>点击</button>
    <div></div>
 
    <script>
        var button = document.querySelector('button')
        var div = document.querySelector('div')

        button.onclick = function() {
            axios.get('/list').then((res) => {
            console.log(res);
        })}

        // 添加请求拦截器-- 在请求发出前才能有效拦截
        axios.interceptors.request.use(function (config) {
            // 在发送请求之前做些什么
            console.log(111);
            div.innerHTML = 'loading...';
            config.headers.token = 'lin';//发送token令牌，例如用于验证用户权限
            return config;
        }, function (error) {
            // 对请求错误做些什么
            return Promise.reject(error);
        });

        // 添加响应拦截器
        axios.interceptors.response.use(function (response) {
            // 2xx 范围内的状态码都会触发该函数。
            // 对响应数据做点什么
            console.log(222);
            div.innerHTML = '';
            return response;
        }, function (error) {
            // 超出 2xx 范围的状态码都会触发该函数。
            // 对响应错误做点什么
            if(error.response.status == 404){
            //经常可以在这里做统一的相应操作，例如某个请求有统一的错误响应
                div.innerHTML = '页面没有找到'
            }
            return Promise.reject(error);
        });
    </script>
</body>

如果你稍后需要移除拦截器，可以这样：

    const myInterceptor = axios.interceptors.request.use(function () {/*...*/});
    axios.interceptors.request.eject(myInterceptor);

总结：

axios拦截器，可以在请求前或响应前做一些统一处理，例如携带请求头信息，添加全局loading，添加全局错误处理等

取消重复请求 -- 使用 cancel token取消请求，根据拦截器例子演示（上例）

1、在后端/router，对应接口设置定时器延迟响应，方便演示

router.get('/list',async (ctx,next) => {
  // console.log(ctx.request.query);

  // 定时器,延迟2秒响应时间
  await new Promise((resolve,reject)=> {
    setTimeout(()=>{
      resolve();
    },2000);
  });

  ctx.body = {
    errcode: 0,
    errmsg: 'ok',
    list: [
      {"username": "James", "age": 36},
      {"username": "Jack", "age": 20},
      {"username": "Mary", "age": 26}
    ]
  }
});

2、前端/html

<body>
    <button>点击</button>
    <div></div>

    <script>

        var button = document.querySelector('button')
        var div = document.querySelector('div')
        const CancelToken = axios.CancelToken;

        button.onclick = function() {
            axios.get('/list').then((res) => {
            console.log(res);
        })}

        // 添加请求拦截器
        axios.interceptors.request.use(function (config) {
            // 在请求拦截器中创建实例，以便每次请求未响应前拦截重复请求
            const source = CancelToken.source();
            config.cancelToken = source.token;
            
            console.log(111);
            // 判断是否仍未响应完成
            if(div.innerHTML === 'loading...'){
                source.cancel('取消请求');
            }
            div.innerHTML = 'loading...';
            config.headers.token = 'lin';//发送token令牌，例如用于验证用户权限
            return config;
        }, function (error) {
            return Promise.reject(error);
        });

        // 添加响应拦截器
        axios.interceptors.response.use(function (response) {
            console.log(222);
            div.innerHTML = '';
            return response;
        }, function (error) {
            return Promise.reject(error);
        });
             
    </script>
</body>

axios.create()创建实例 -- 可以通过创建实例，对不同的请求、响应以及拦截进行设置

        var instance = axios.create();
        var instance2 = axios.create();
        
        //请求拦截器，应该写在请求发出前，才能进行有效拦截
        instance.interceptors.request.use(function (config) {
            console.log('111');
            config.headers.token = '1111';//发送token令牌，例如用于验证用户权限
            return config;
        }, function (error) {
            // 对请求错误做些什么
            return Promise.reject(error);
        });

        instance2.interceptors.request.use(function (config) {
            config.headers.token = '2222';//发送token令牌，例如用于验证用户权限
            return config;
        }, function (error) {
            // 对请求错误做些什么
            return Promise.reject(error);
        });

        instance.get('/list').then((res)=> {
            console.log(res);
        });
        instance2.get('/json').then((res)=> {
            console.log(res);
        });

axios.all()进行并发操作

        var xhr1 = axios.get('/list')
        var xhr2 = axios.get('/json')

        axios.all([xhr1,xhr2]).then((res) => {  //两个实例都满足条件才进行
            console.log(res);   //返回一个数组，包含两个实例的响应结果
        })

        // axios.all([xhr1,xhr2]).then(axios.spread((res1,res2)=>{
        //     console.log(res1);       //响应结果分开返回
        //     console.log(res2);
        // }))