一、axios是什么
axios 是一个轻量的 HTTP客户端。
基于 XMLHttpRequest 服务来执行 HTTP 请求，支持丰富的配置，支持 Promise，支持浏览器端和 Node.js 端。自Vue2.0起，尤大宣布取消对 vue-resource 的官方推荐，转而推荐 axios。现在 axios 已经成为大部分 Vue 开发者的首选。
特性
- 从浏览器中创建
XMLHttpRequests - 从
node.js创建http请求 - 支持
Promise API - 拦截请求和响应
- 转换请求数据和响应数据
- 取消请求
- 自动转换
JSON数据 - 客户端支持防御
XSRF
二、axios的二次封装
axios 的 API 很友好，可以很轻松地在项目中直接使用。不过随着项目规模增大，如果每发起一次HTTP请求，就要把这些比如设置超时时间、设置请求头、根据项目环境判断使用哪个请求地址、错误处理等等操作，都需要写一遍。这种重复劳动不仅浪费时间，而且让代码变得冗余不堪，难以维护。为了提高代码质量，我们应该在项目中二次封装一下 axios 再使用。
1.如何封装
封装的同时，你需要和后端协商好一些约定，请求头，状态码，请求超时时间.......
- 设置接口请求前缀：根据开发、测试、生产环境的不同，前缀需要加以区分
- 请求头 : 来实现一些具体的业务，必须携带一些参数才可以请求(例如：会员业务)
- 状态码: 根据接口返回的不同status ， 来执行不同的业务，这块需要和后端约定好
- 请求方法：根据get、post等方法进行一个再次封装，使用起来更为方便
- 请求拦截器: 根据请求的请求头设定，来决定哪些请求可以访问
- 响应拦截器： 这块就是根据 后端返回来的状态码判定执行不同业务
axios的常用基本配置项为：
axios({
method: 'get', // post、get、put、delete....
baseURL: '', // 请求的域名，基本地址，公共的路径
url: '', // 请求的路径
params: {}, // get参数会将请求参数拼接在url上
data: {}, // post会将请求参数放在请求体中
headers: {}, // 设置请求头，例如设置token等
timeout: 1000, // 设置请求超时时长，单位：ms
withCredentials：false,//表明了是否是跨域请求、默认是false
maxContentLength：1000,//相应内容的最大值
auth:{},//表示应该使用 HTTP 基本身份验证，并提供凭据。这将设置一个 `Authorization` 标头，覆盖您使用 `headers` 设置的任何现有的 `Authorization` 自定义标头。
responseType: 'json', // 默认值
// `responseEncoding` 表示用于解码响应的编码（仅限 Node.js）
// 注意：忽略“stream”或客户端请求的 `responseType`
responseEncoding: 'utf8', // 默认值
// `xsrfCookieName` 是用作 xsrf 令牌值的 cookie 的名称
xsrfCookieName: 'XSRF-TOKEN', // 默认值
// `xsrfHeaderName` 是携带 xsrf 令牌值的 http 标头的名称
xsrfHeaderName: 'X-XSRF-TOKEN', // 默认值
...
})
在项目中，我是这样二次封装的：
1.在axios.js文件内设置好基础的配置项：
import Vue from "vue";
import axios from "axios";
axios.defaults.timeout = 100000;
axios.defaults.withCredentials = true;
Vue.prototype.$axios = axios;//把axios挂载到vue的原型上供全局调用。</code></pre><p>2.如果有生产环境的区分，则可以通过判断node环境变量确定链接请求地址的<code>baseURL</code>：</p><pre><code class="javascript">if (process.env.NODE_ENV === 'development') {
axios.defaults.baseURL = 'http://dev.xxx.com'
} else if (process.env.NODE_ENV === 'production') {
axios.defaults.baseURL = 'http://prod.xxx.com'
}</code></pre><p>3.然后，需要添加请求拦截器和响应拦截器：</p><p>a.请求拦截器可以在每个请求里加上<code>token</code>，或者添加一些其他默认需要发送给后端的基础信息。</p><p>以下是请求拦截器的简单用法示例：</p><pre><code class="javascript">// 请求拦截器
axios.interceptors.request.use(
config => {
// 每次发送请求之前判断是否存在token
// 如果存在，则统一在http请求的header都加上token，这样后台根据token判断你的登录情况，此处token一般是用户完成登录后储存到localstorage里的，下面的代码只是一个简单表示
token && (config.headers.Authorization = token)
return config
},
error => {
return Promise.error(error)
})</code></pre><p> 进阶的做法，就是存储每次发送的请求，拦截取消之前已经发送但是还没收到后端回应的相同请求，或者<code>router</code>（路由）跳转前清除掉上一个<code>router</code>里暂未收到后端回应的请求。<br> 说到这个问题，就需要讲到<code>axios</code>中<code>cancelToken</code>这个<code>API</code>，该<code>API</code>可以获取到当前请求形成取消对应请求的函数，调用后即取消该请求。</p><p>对应的代码如下所示：</p><pre><code class="javascript">const CancelToken = axios.CancelToken;
import store from 'store.js'
Vue.$pending = {}
axios.interceptors.request.use((config) => {
let key = config.url + '&' + config.method;//通过对应字段组成可唯一确定取消请求函数的key
removePending(key, true)//删除相同的请求
//
config.cancelToken = new CancelToken(cancelFun => { // cancelFun => 取消函数的形参 实际上对应的是这个取消函数
// 一个请求的取消函数 对应着一次请求
// 执行取消函数 才能取消本次请求 存储本次请求对应的取消函数 保证每次请求是唯一的 这样才能判断是否存在重复请求
Vue.$pending[key] = cancelFun
})
// 添加一些默认的参数，具体视项目决定
addDefaultParams(config.headers, store)
return config
})
addDefaultParams(obj, store){
// 添加一些默认的参数，具体视项目决定
}
function removePending(key, isRequest = false) {
if (Vue.$pending[key]) {
// 当上一次请求未响应式 再一次发送请求时 会把上一次请求中断掉 并把本次自定义错误信息 放入reject(err)中
Vue.$pending[key]()//取消重复的请求，不需要函数参数
delete Vue.$pending[key]//被取消请求后，删除掉该取消函数
}
}</code></pre><p>b.响应拦截器可以在接收到响应后先做一层操作，如根据状态码判断登录状态是否需要返回登录页面、授权。</p><pre><code class="javascript">axios.interceptors.response.use(response => {
// 如果返回的状态码为200，说明接口请求成功，可以正常拿到数据
// 否则的话抛出错误
if (response.status === 200) {
if (response.data.code === 511) {
// 未授权调取授权接口
} else if (response.data.code === 510) {
// 未登录跳转登录页
} else {
return Promise.resolve(response)
}
} else {
return Promise.reject(response)
}
}, error => {
// 我们可以在这里对异常状态作统一处理
if (error.response.status) {
// 处理请求失败的情况
// 对不同返回码对相应处理
return Promise.reject(error.response)
}
})</code></pre><p>项目里的响应拦截器代码如下：</p><pre><code class="javascript">axios.interceptors.response.use((response) => {
let key = response.config.url + '&' + response.config.method
removePending函数(key)//删除相同的请求
if (!response) {
return false;
}
if (response.request.responseType === 'blob') {
return response
}
return response.data;
},
(content) => {
if(content?.response?.status==="401"){
checkToken();
}
return Promise.reject(content);
}
);
function checkToken(){
//检查localStorage内是否有tokenId，若没有，则store设置为logout，路由跳转到登录界面
if(!localStorage.getItem("tokenId")){
store.dispatch('logout');
router.push({name: "login"});
}
else{
//若localStorage内有tokenId，则登录状态过期，函数内代码功能可为弹出重新登录小窗口
debounceUnauthorized();
}
}</code></pre><p> 当需要完成路由跳转前取消重复请求，则在<code>main.js</code>文件，即<code>router</code>文件，在其<code>beforeEach</code>钩子函数内写入<code>removePending</code>函数来删除请求。</p><pre><code class="javascript">router.beforeEach((to, from, next) => {
for(let key in Vue.$pending){
Vue.$pending[key]();//依次删除pending请求
}
Vue.$pending = {};
..........这下面是你的路由验证代码..........
})</code></pre><p> 以上是<code>axios</code>的基本配置，接着，对于项目里每一个包或者模块，都会有自己的<code>axios</code>请求集合的<code>js</code>文件。通过上一步把<code>axios</code>挂载到<code>vue</code>上，其他<code>js</code>文件可以通过<code>this.$axios</code>来调用<code>axios</code>插件。举个例子如下：</p><pre><code class="javascript">//demo.js
export default{
createPo: (param) => {
return $axios.$post('url', {param});
},
..........文件..........
}</code></pre><p> 像上面的文件，每隔包或者模块都会有一个对应的文件来存储，可以将他们放置在同一个文件夹内，方便获取。比如说，所有的请求文件都放在同级的<code>modules</code>文件夹，那获取相关的内容，可以通过以下方式：</p><pre><code class="javascript">import Vue from "vue";
const modulesFiles = require.context("./modules", true, /\.js$/);
const modules = {};
modulesFiles.keys().map((key) => {
const keys = key.replace(/(\.\/|\.js)/g, "");
modules[keys.split("/").pop()] = modulesFiles(key).default;
});
Vue.prototype.$api = modules;
export default {
modules
}</code></pre><p>通过以上的设置，在其他<code>vue</code>文件内就可以通过<code>this.$api.$demo.createPo</code>直接调用请求函数了。<br>至此，<code>axios</code>的二次封装基本结束（后续有什么其他设置再来补充）</p><h3 id="item-0-3"><strong>三、axios的调用方式备忘</strong></h3><h4><strong>1.axios常用语法</strong></h4><ul><li><code>axios(config)</code>: 通用/最本质的发任意类型请求的方式。</li><li><code>axios(url,config)</code>: 可以只指定url发送get请求。</li><li><code>axios.request(config)</code>: 等同于axios(config)。</li><li><code>axios.get(url,config)</code>: 发送get请求。</li><li><code>axios.delete(url,config)</code>: 发送delete请求。</li><li>a<code>xios.post(url,data,config)</code>: 发送post请求。</li><li><code>axios.put(url,data,config)</code>: 发送put请求。</li><li><code>axios.defaults.xx</code>: 请求的默认全局配置。</li><li><code>axios.interceptors.request.use()</code>: 添加请求拦截器。</li><li><code>axios.interceptors.response.use()</code>: 添加响应拦截器。</li><li><code>axios.create([config])</code>: 创建一个新的axios(它没有下面的5个功能)。</li><li><code>axios.Cancel()</code>: 创建取消请求的错误对象。</li><li><code>axios.CancelToken()</code>: 创建取消请求的Token对象。</li><li><code>axios.iscancel()</code>: 是否是一个取消请求的错误。</li><li><code>axios.all(promises)</code>: 批量执行多个异步请求。</li><li><code>axios.spread()</code>: 指定接受所有成功数据的回调函数的方法。</li></ul><p><strong>注：</strong><br> 如果存在两个请求响应拦截器，则执行顺序是request2 > request1 > response1 > response2 > data</p><h4><strong>2.axios语法细节：</strong></h4><p>⑴.<code>axios.delete</code>只有两个参数<code>url</code>和<code>config</code>，<code>delete</code>请求有两种参数的拼接的方式：</p><p>①.请求参数以?的形式拼接在url路径上面：</p><pre><code class="javascript"> axios.delete(url,{
params:{
属性：属性值
}
})</code></pre><p>②.请求参数放在请求体body里面：</p><pre><code class="javascript"> axios.delete(url,{
data:{
属性：属性值
}
})</code></pre><p><strong>注：<code>data</code> 与 <code>params</code> 的区别：</strong><br>⑴ <code>params</code>：将与请求一起发送的<code>URL</code>参数，常用于<code>'get'</code>请求，必须是一个无格式对象<code>（plain object）</code>或<code>URLSearchParams</code>对象。后端对应采用<code>@RequestParam</code>接收，对应<code>chrome</code>的<code>Query String Parameters</code>。<br>⑵ <code>data</code>：作为请求主体被发送的数据，只适用于<code>'put'</code>、<code>'post'</code>、<code>'patch'</code>类型的请求，<br>在没有设置<code>transformRequest</code>时，<code>data</code>类型必须是<code>string</code>、<code>plain object</code>、<code>ArrayBufferView</code>、<code>URLSearchParams</code>之一。后端对应采用<code>@RequestBody</code>接收，对应<code>chrome</code>的<code>Request Payload</code>。</p>
