axios网络请求

末蓝、 2023-01-10 14:38 151阅读 0赞

> 人的一生就像一篇文章，只有经过多次精心修改，才能不断完善。  
> 你好，我是梦阳辰，期待与你相遇！

### 文章目录 ###

*  01.概述
 *  02.axios请求方式
 *   *  使用vue-axios(重点)
     *  axios模块封装（重点）
 *  03.axios拦截器

# 01.概述 #

Axios 是一个基于 promise 的 HTTP 库，可以用在浏览器和 node.js 中。

[axios中文文档][axios]

Vue中发送网络请求有非常多的方式。那么,在开发中,如何选择呢?\*\*选择一:\*\*传统的Ajax是基于XMLHttpRequest（XHR)

为什么不用它呢?  
非常好解释,配置和调用方式等非常混乱.

编码起来看起来就非常蛋疼.

所以真实开发中很少直接使用,而是使用jQuery-Ajax

**选择二：**  
在前面的学习中,我们经常会使用jQuery-Ajax相对于传统的Ajax非常好用.

为什么不选择它呢?  
首先,我们先明确一点:在Vue的整个开发中都是不需要  
使用jQuery 了.

那么,就意味着为了方便我们进行一个网络请求,特意引用一个jQuery,你觉得合理吗?

jQuery的代码1w+行.

Vue的代码才1w+行.

完全没有必要为了用网络请求就引用这个重量级的框架.

**选择三**:官方在Vue1.x的时候,推出了Vue-resource.>Vue-resource的体积相对于jQuery小很多.>另外Vue-resource是官方推出的.

为什么不选择它呢?  
在Vue2.0退出后, Vue作者就在GitHub的Issues中说明了去掉vue-resource,并且以后也不会再更新.

那么意味着以后vue-reource不再支持新的版本时,也不会再继续更新和维护.

对以后的项目开发和维护都存在很大的隐患.

**选择四**:在说明不再继续更新和维护vue-resource的同时,作者还推荐了一个框架: axios

**为什么用它呢?**

axios有非常多的优点,并且用起来也非常方便.

**为什么选择axios？**  
功能特点：  
在浏览器中发送XMLHttpRequests请求

在node.js 中发送http请求

支持Promise API

拦截请求和响应

转换请求和响应数据等等

# 02.axios请求方式 #

**支持多种请求方式:**

axios(config)
    axios.request(config)
    axios.get(url[, config])
    axios.delete(url[, config])
    axios.head(url[, config])
    axios.post(url[, data[ config]l)
    axios.put(url[, data[, config]I)
    axios.patch(url[, data[, configl]l)

**安装axios：**

npm install axios --save

**使用：**  
默认get请求

import {  createApp } from 'vue'
    import App from './App.vue'
    import router from './router'
    import store from './store'
    import axios from "axios";
    createApp(App).use(store).use(router).mount('#app')
    
    axios({ 
        url:'http://123.207.32.32:8000/home/data',
        method:'get',
        params:{ //参数
            type:'pop',
            page:1
        }
    }).then(res=>{ 
        console.log(res)
    })

## 使用vue-axios(重点) ##

[官网][Link 1]

vue-axios是将axios集成到Vue.js的小包装器，可以像插件一样进行安装。

安装完axios，vue-axios之后可以在Vue项目下面node\_modules/\_vue-axios/src/index.js中看到vue-axios的源代码。使用 Vue 的插件写法，更符合 Vue 整体生态环境。

安装：

npm install --save axios vue-axios

将下面代码加入入口文件:

import Vue from 'vue'
    import axios from 'axios'
    import VueAxios from 'vue-axios'
    
    Vue.use(VueAxios, axios)

Script:

按照这个顺序分别引入这三个文件： vue, axios and vue-axios

使用：

This wrapper bind axios to Vue or this if you’re using single file component.

你可以按照以下方式使用:

Vue.axios.get(api).then((response) => { 
      console.log(response.data)
    })
    
    this.axios.get(api).then((response) => { 
      console.log(response.data)
    })
    
    this.$http.get(api).then((response) => { 
      console.log(response.data)
    })

有时候,我们可能需求同时发送两个请求使用axios.all,可以放入多个请求的数组.

axios.all()返回的结果是一个数组，使用axios.spread 可将数组\[res1,res2\]展开为res1, res2

import {  createApp } from 'vue'
    import App from './App.vue'
    import router from './router'
    import store from './store'
    import Vue from 'vue'
    import axios from 'axios'
    import VueAxios from 'vue-axios'
    
    createApp(App).use(store).use(router).mount('#app')
    
    axios({ 
        url:'http://123.207.32.32:8000/home/data',
        method:'get',
        params:{ //参数
            type:'pop',
            page:1
        }
    }).then(res=>{ 
        console.log(res)
    })
    
    //2.axios发送并发请求
    axios.all([axios({ 
        url:'http://123.207.32.32:8000/home/multidata'
    }),axios({ 
        url:'http://123.207.32.32:8000/home/data',
        params:{ //参数
            type:'sell',
            page:2
        }
    })])./*then(results=>{ //多个请求成功后处理
        console.log(results)
    })*/
    then(axios.spread((res1,res2)=>{ 
        console.log(res1)
        console.log(res2)
    }))

**axios全局配置：**  
事实上,在开发中可能很多参数都是固定的.  
这个时候我们可以进行一些抽取,也可以利用axiox的全局配置  
![在这里插入图片描述][20210125133727461.png]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ppYWh1YW5f_size_16_color_FFFFFF_t_70]  
**Axios实例：**  
当服务器有多个时，可以创建多个Axios实例，进行网络请求。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ppYWh1YW5f_size_16_color_FFFFFF_t_70 1]

## axios模块封装（重点） ##

如果不封装，你可能在每个组件中导入axios，然后使用网络请求。  
这样操作的缺点在于，对第三方框架依赖太大，如果第三方框架不在维护…。并且代码冗余。

新建network文件夹  
新建request.js

使用：

//封装模块的使用
    import { request} from "./network/request";
    
    request({ 
        url:'/home/multidata'
    },res=>{ 
        console.log(res)
    },err=>{ 
        console.log(err)
    })

**对封装进行简化：**

使用：

import { request} from "./network/request";
    
    request({ 
        url:'/home/multidata'
    }).then(res=>{ 
        console.log(res)
    }).catch(err=>{ 
        console.log(err)
    })

# 03.axios拦截器 #

对请求进行拦截

axios提供了拦截器，用于我们在发送每次请求或者得到响应后，进行对应的处理。如何使用拦截器呢?

在请求或响应被 then 或 catch 处理前拦截它们。

// 添加请求拦截器
    axios.interceptors.request.use(function (config) { 
        // 在发送请求之前做些什么
        return config;
      }, function (error) { 
        // 对请求错误做些什么
        return Promise.reject(error);
      });
    
    // 添加响应拦截器
    axios.interceptors.response.use(function (response) { 
        // 对响应数据做点什么
        return response;
      }, function (error) { 
        // 对响应错误做点什么
        return Promise.reject(error);
      });

例如:

import axios from "axios";
    
    export function request(config,success,failure) { 
        //创建axios的实例
        const instance = axios.create({ 
            baseURL:'http://123.207.32.32:8000',
            timeout:5000
        })
        //拦截器
        instance.interceptors.request.use(config=>{ 
            // 在发送请求之前做些什么
            console.log("在发送请求之前做些什么")
            return config;
        },err=>{ 
            // 对请求错误做些什么
            return Promise.reject(err);
        })
    
        instance.interceptors.response.use(response=>{ 
            // 对响应数据做点什么
            return response
        },err=>{ 
            // 对响应错误做点什么
            return Promise.reject(err);
        })
        //发送真正的网络请求
        instance(config).then(res=>{ 
            success(res)
        }).catch(err=>{ 
            failure(err)
        })
    
    
    }

![在这里插入图片描述][20210125150604257.png]

> Don’t let dream just be your dream.

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ppYWh1YW5f_size_16_color_FFFFFF_t_70 2]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ppYWh1YW5f_size_16_color_FFFFFF_t_70 3]

[axios]: http://www.axios-js.com/zh-cn/docs/index.html
[Link 1]: http://www.axios-js.com/zh-cn/docs/vue-axios.html
[20210125133727461.png]: /images/20221119/747dd6eca0624e4181a8e183305a2f4a.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ppYWh1YW5f_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20210125134050808.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ppYWh1YW5f,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ppYWh1YW5f_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20210125135820969.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ppYWh1YW5f,size_16,color_FFFFFF,t_70
[20210125150604257.png]: https://img-blog.csdnimg.cn/20210125150604257.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ppYWh1YW5f_size_16_color_FFFFFF_t_70 2]: https://img-blog.csdnimg.cn/20210130104751638.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ppYWh1YW5f,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ppYWh1YW5f_size_16_color_FFFFFF_t_70 3]: https://img-blog.csdnimg.cn/20210130104751584.jpg?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ppYWh1YW5f,size_16,color_FFFFFF,t_70