这是我参与11月更文挑战的第20天，活动详情查看：2021最后一次更文挑战」 ​

 一.网络模块封装

​

二.jsonp

​

jsonp封装

​

三.为什么选择axios

​

四.axios请求方式

​

这里我们来演示一下第一种axios(config):

1.首先安装项目终端输入  vue init webpack learnaxios

​

2.把原生的components删掉，把App.vue里面该删的删除得到以下的code

​

3.项目终端运行 npm install axios --save  安装axios

4.在main.js里面导入axios             import axios from 'axios'

        httpbin.org          (模拟网络请求的网站)

​

        这边提供一个可访问的数据接口        http://123.207.32.32:8000/home/multidata 

​

5.由于axios是支持promise的 所有可以这样写  

             （中间加个methos 是方式的意思）

               请求url 然后拿到里面的res 再对res进行打印。就这么简单 （这个借口只能提供get请求哈post请求要报405···） 这个借口只是示例，真正的接口是我花9块钱买的，如果大家要新的接口可以找我，但是一定要遵守规则，不要打乱规则

​

6.终端执行： npm run dev 得到了这样一个object数据：

​

五.axios发送并发请求

​

1.axios并发请求axios.spread

​

2.这里讲一下数组的JavaScript数组的解构  

​

六.axios全局配置URL

这样就不用每次都写个很长的http······ 使代码更优雅

​

七.创建axios实例

为什么要创建axios实例，因为如果一个项目要发送不同地址的网络请求，如果向之前那样定义全局的aixos实例肯定是不不信的，要向下面这样去写

​

当然你也可以每个页面都写一个import axios from 'axios' 去请求网络，就想这样：

​

你可能会说，哇这还不简单，但是你这样想就大错特错了，如果有一天axios不维护了或者出现严重bug修复不了（这是可能的非常可能发生的事情），你就要修改每个页面里面的import和网络请求的写法，你就等着加班秃头吧。

所以，真正的创建axios实例，应该是这样

新建一个network文件及，里面创建request.js

​

​

​

前面是讲的回调的方法，success，failure

我们也可以这样写：

​

​

当然还有一个最终方案：究极不讲道理····

​

​

短小又精干哈哈哈哈

你以为就结束了吗？还有一种方法，是不是很绝望啊哈哈哈，就是卷

​

​

以上就是axios创建实例，这样就是为了防止当第三方依赖不更新了或者出现严重bug的时候，这个时候就不用修改大量代码来维护项目了

八.axios拦截器的使用

1.如何使用axios拦截器

​

​

看一下源代码            希望自己以后能读得懂源码·····​

运行代码 看一下拦截器的作用：

​

不难发现，在request.js 71行打印了一个object   但是在main.js里面返回了一个错误的信息， 因为把config拦截了嘛 当然返回err哦。哈哈 是不是很简单的逻辑

要解决这个问题，在interceptors.request请求里return config 运行下代码 ，搞定

当然有了请求拦截也有响应拦截

​

\

​