想的越多，心里越烦躁，趁着有限的时间，学自己想学的东西，做自己想做的事情。

前言

网上关于axios详解、配置等等的教程文章有很多，大部分都是高大上的源码解析，没有实际应用的一些分享，本篇文章以实际应用为主，希望能帮助到大家。

安装依赖

本文中使用的是Vue CLI3.0,安装依赖使用vue add命令进行

axios安装

vue add axios# yarn | npm安装yarn add axios | npm install axios复制代码

引用插件执行add命令后，CLI会自动帮我们在main.js中引用它，并做一些默认配置。接下来，带大家看一下，add命令都做了那些事情

src下新建了一个plugins文件夹，这个文件夹用于存放Vue引入插件的相关配置文件

在plugins文件夹中，新建了axios.js文件

在package.json文件中添加了axios的依赖信息以及版本号（yarn | npm安装时会自动做这一步）

main.js中导入了axios的配置文件,方便全局使用axios

使用插件

this.axios.${方法名}.then().catch()// 例子this.axios.get(url,requestData).then((res)=>{// 成功的回调}).catch((err)=>{// 失败的回调});/*

支持所有http请求以及请求取消、并发请求等功能，更多细节以及使用方法移步官方文档

文档: http://www.axios-js.com/zh-cn/docs/

*/复制代码

配置axios

接下来回到本文的重点，如何去合理的配置它以提高开发效率。本篇配置基于脚手架创建的axios.js进行修改

创建配置文件

如果使用脚手架进行安装axios，将会在在src目录下查找plugins文件夹，并在plugins文件夹下创建axios.js文件。如果使用yarn方式安装，请手动创建plugins文件夹以及对应的js文件。

配置文件代码

每一个步骤都有注释，很详细，开发者仔细阅读即可理解。

"use strict";importVuefrom'vue';importaxiosfrom"axios";// 设置baseURLaxios.defaults.baseURL = process.env.baseURL || process.env.apiUrl ||'https://www.kaisir.cn';// 请求头添加tokenaxios.defaults.headers.common['Authorization'] ="";// 设置get请求头axios.defaults.headers.get['Content-Type'] ='application/x-www-form-urlencoded;charset=utf-8';// 设置post请求头axios.defaults.headers.post['Content-Type'] ='application/json;charset=utf-8';letconfig = {baseURL:"localhost/user",// 请求超时时间timeout:60*1000,// 跨域请求时是否需要凭证// withCredentials: true, // Check cross-site Access-Control};// 根据环境当前变量更改baseURLswitch(process.env.NODE_ENV) {case'development':// 开发环境config.baseURL ="https://www.kaisir.cn/user";break;case'production':// 生产环境config.baseURL ="https://www.kaisir.cn/api";}const_axios = axios.create(config);// 请求拦截器_axios.interceptors.request.use(function(config){// Do something before request is sentreturnconfig; },function(error){// Do something with request errorerror.data = {}; error.data.msg ="服务器异常";returnPromise.reject(error); });// 响应拦截器_axios.interceptors.response.use(function(response){// Do something with response datareturnresponse; },function(error){// Do something with response errorerror.data = {}; error.data.msg ="请求超时或服务器异常";returnPromise.reject(error); });// eslint-disable-next-line no-unused-varsPlugin.install =function(Vue, options){ Vue.axios = _axios;window.axios = _axios;Object.defineProperties(Vue.prototype, {axios: { get() {return_axios; } },$axios: { get() {return_axios; } }, });};Vue.use(Plugin);exportdefaultPlugin;复制代码

在入口文件中进行引用

// main.jsimport'./plugins/axios'复制代码

实际应用

例如这样一个场景：后端的所有接口都需要登录后，根据成功登录返回的token进行访问。后端接口使用shiro+jwt实现接口鉴权和token发放

在App.vue中调用登录接口获取token

作者：神奇的程序员

链接：https://juejin.im/post/5df7b9346fb9a0163307451b

来源：掘金

著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。