1.axios封装在vue项目中，与后台交互获取数据的部分通常使用axios库，axios库是一个基于promise的http库，可以在浏览器端和node.js上运行，它有很多优秀的特性，比如拦截请求和响应、取消请求、转换json、防御来自客户端的XSRF等。
固定
npm安装axios//安装axios复制代码介绍
在一般项目的src目录下，新建一个request文件夹，然后在里面新建一个http.js和一个api.js文件。http.js文件用来封装我们的axios，api.js用来统一管理我们的接口。
环境切换
项目环境可能包括开发环境、测试环境和生产环境。通过节点的环境变量匹配默认接口url前缀。Axios.defaults.baseURL可以设置Axios的默认请求地址，不多说了。
设置请求超时
通过axios.defaults.timeout设置默认请求超时，比如10s后会通知用户当前请求超时，请刷新等。
axios . defaults . time out=10000；发布请求标题的设置
在请求帖子的时候，需要添加一个请求头，所以可以在这里做一个默认的设置，就是将帖子的请求头设置为application/x-www-form-urlencoded；charset=UTF 8:
axios . defaults . headers . post[‘ Content-Type ‘]=’ application/x-www-form-urlencoded；charset=UTF-8 ‘；请求拦截
您可以在发送请求之前拦截它。为什么要拦截？拦截请求的目的是什么？例如，有些请求只有在用户登录后才能访问，或者当发出post请求时，我们提交的数据需要序列化。这时候我们就可以在请求发出之前拦截它，做到我们想做的事情。
请求拦截
这里说一下token。通常，登录完成后，用户的令牌通过localStorage或cookie存储在本地。然后，用户每次进入页面(也就是main.js中)，都会先从本地存储中读取令牌。如果令牌存在，vuex中的令牌状态将被更新。然后，每次请求接口时，请求的头部都会携带令牌，后台工作人员可以根据携带的令牌判断你的登录是否过期。如果没有，说明你从来没有登录过。这时候可能会有朋友产生疑惑，就是每个请求都携带一个令牌，那么一个页面不需要用户登录就可以访问怎么办？其实你的前端请求可以携带token，但是后台可以选择不接收！
响应的截取
响应拦截器很好理解，就是服务器返回给我们的数据在被获取之前可以进行处理。比如上面的思路:如果后台返回的状态码是200，则正常返回数据；否则，我们需要的一些错误将会根据错误状态码的类型而产生。其实这主要是一个统一处理错误，在登录失败或者注销后调整登录页面的操作。
需要注意的是，上面的toast()方法就是我介绍的vant库中的Toast灯提示组件。您可以根据您的ui库使用其中一个提示组件。
封装方法和post方法
常见的ajax请求方法有get、post、put等。而且相信小伙伴们都很熟悉。Axios有很多类似的方法。但是为了简化我们的代码，我们仍然需要做一个简单的包。主要封装了以下两种方法:get和post。
获取方法:
通过定义get函数，get函数有两个参数。第一个参数表示我们要请求的url地址，第二个参数是我们要携带的请求参数。get函数返回一个promise对象，解析服务器在axios请求成功时返回一个值，在请求失败时返回reject错误值。最后，get函数通过export抛出。
发布方法:
原理和get基本相同，但是需要注意的是post方法必须使用序列化提交的从参数对象的操作，所以这里我们通过node的qs模块来序列化我们的参数。这一点非常重要。如果没有序列化操作，后台无法获取你提交的数据。这是《从‘QS’引进QS》一文的开头；原因。
这里有一个小细节。axios.get()方法和axios.post()方法在提交数据时写参数还是有区别的。不同的是get的第二个参数是一个{}，然后这个对象的params属性值就是一个parameter对象的属性值。post的第二个参数是一个参数对象。注意两者的细微差别！
axios的封装基本完成。下面简单说一下api的统一管理。
一个整洁的api就像一个电路板，即使再复杂，也能清晰地理解整个电路。如上所述，我们将创建一个新的api.js，然后将我们所有的api接口存储在这个文件中。
首先，我们将封装的get和post方法引入api.js
/** * api接口统一管理*/import {get，post} from ‘。/http ‘比如现在我们有这样一个接口，它是一个post请求:
3358 www.baiodu.com/api/v1/users/my _地址/地址_编辑_在我们可以像这样把它封装在api.js中之前:
export const API address=p=post(‘ API/v1/users/my _ address/address _ edit _ before ‘，p)；我们定义了一个apiAddress方法，它有一个参数p，p是我们请求接口时携带的参数对象。然后我们调用封装的post方法。post方法的第一个参数是我们的接口地址，第二个参数是apiAddress的P参数，是请求接口时携带的参数对象。最后，导出一个地址。
然后，我们可以像这样在页面中调用api接口:
其他api接口，就在pai.js友情提醒下面继续展开，每个接口写注释！
api管理的一个优势是我们统一了API。如果我们后期需要修改接口，可以直接在api.js中找到相应的修改，而不是去每一页都找到我们的接口再修改，会很麻烦。关键的一点是，在大量修改的情况下，gg将是规范。就是如果直接在我们的业务代码中修改接口，很容易不小心移到我们的业务代码中，造成不必要的麻烦。
最后，打包完成的axios代码。
/**axios封装* 请求拦截、相应拦截、错误统一处理*/从” axios “导入axios从《QS》导入QS；从”万特”导入{ Toast }；’导入商店自’./store/index’//环境的切换如果(过程。环境。node _ ENV==’ development ‘){ axios。默认值。基本URL=’/API ‘；} else if(过程。环境。node _ ENV==’ debug ‘){ axios。默认值。基本URL=“”；} else if(过程。环境。node _ ENV==’ production ‘){ axios。默认值。基本网址=’http://api.123dailu.com/’；}//请求超时时间axios。默认值。超时=10000；//发布请求头axios。默认值。标题。post[‘ Content-Type ‘]=’ application/x-www-form-urlencoded；charset=UTF-8 ‘；//请求拦截器axios。截击机。请求。使用(config={//每次发送请求之前判断是否存在令牌,如果存在,则统一在超文本传送协议(超文本传输协议的缩写)请求的页眉都加上令牌,不用每次请求都手动添加了//即使本地存在令牌,也有可能代币是过期的,所以在响应拦截器中要对返回状态进行判断const token=存储。状态。token令牌(配置。标题。授权=令牌)；返回配置；}，error={ return Promise.error(错误);})//响应拦截器axios。截击机。回应。使用(response={ if(response。status===200){返回承诺。解决(响应)；}否则{ return Promise.reject(响应);} }, //服务器状态码不是200的情况错误={ if(错误。回应。状态){开关(错误。回应。状态){//401:未登录//未登录则跳转登录页面,并携带当前页面的路径//在登录成功后返回当前页面,这一步需要在登录页操作4 .案例401:路由器。替换({路径: ‘/登录’，查询: {重定向:路由器。电流输出。完整路径} })；打破；//403令牌过期//登录过期对用户进行提示//清除本地代币和清空状态管理中代币对象//跳转登录页面案例403: Toast({ message: ‘登录过期,请重新登录，duration: 1000，禁止点击: true })；//清除令牌本地存储。移除项目(“令牌”)；store.commit(‘loginSuccess ‘，null)；//跳转登录页面,并将要浏览的页面完整路径传过去,登录成功后跳转需要访问的页面设置超时(()={路由器。替换({路径: ‘/登录’，查询: {重定向:路由器。电流输出。完整路径} })；}, 1000);打破；//404请求不存在案例404: Toast({ message: ‘网络请求不存在，duration: 1500，禁止点击: true })；打破；//其他错误,直接抛出错误提示默认: Toast({消息:错误。回应。数据。消息，duration: 1500，竞价点击: true })；}返回Promise.reject(错误。响应);} });/** *获取方法,对应得到请求* @param {String} url [请求的全球资源定位器(统一资源定位器)地址] * @param {Object} params [请求时携带的参数]*/导出函数get(url，params){ return new Promise((resolve，reject)={ axios.get(url，{ params: params }).然后(RES={ resolve(RES . data))；}) .catch(err={ reject(err。数据)})；}/** *帖子方法,对应邮政请求* @param {String} url [请求的全球资源定位器(统一资源定位器)地址] * @param {Object} params [请求时携带的参数]*/导出函数post(url，params){ return new Promise((resolve，reject)={ axios.post(url，QS.stringify(params)).然后(RES={ resolve(RES . data))；}) .catch(err={ reject(err。数据)})；}axios的封装根据需求的不同而不同。这里非常感谢评论里一些很中肯的建议,我也对此进行了思考和针对不同需求的改善。主要有以下改变：
1.优化爱可信封装,去掉之前的得到和邮政
2.断网情况处理
3.更加模块化的美国石油学会(美国石油协会)管理
4.接口域名有多个的情况
5.api挂载到vue。原型上省去引入的步骤
http。JSP中爱可信封装的优化,先直接贴代码：
/** * axios封装*请求拦截、响应拦截、统一错误处理*/从‘axios’导入axios；’从’导入路由器./router ‘；’导入商店自’./store/index ‘；从“vant”导入{ Toast }；/* * *提示功能*禁止点击屏蔽，显示一秒后关闭*/const tip=msg={ toast({ Message 3360 msg，duration 3360 1000，bid click 3360 true })；}/* * *跳转到登录页面*携带当前页面路由以便在登录页面完成登录后返回当前页面*/const tolog in=()={ router . replace({ path 3360 ‘/log in ‘，query 3360 { redirect 3360 router . current out . full path } })；}/* * *请求失败后的错误统一处理* @param {Number} status请求失败的状态码*/const错误句柄=(status，other)={//状态码判断交换机(status) {//401:未登录，跳转到登录页面case 401: tolog in()；打破；//403令牌过期//清除令牌跳转到登录页面CASE40:TIP(‘登录过期，请重新登录’)；local storage . remove item(‘ token ‘)；store.commit(‘loginSuccess ‘，null)；settime out(()={ tolog in()；}, 1000);打破；//404请求不存在case 404: tip(‘请求的资源不存在’)；打破；default: console.log(其他)；} }//创建axios实例var instance=axios . Create({ time out : 1000 * 12 })；//设置post请求头instance . defaults . headers . post[‘ content-type ‘]=’ application/x-www-form-urlencoded ‘；/* * *请求拦截器*每次请求前，如果有令牌，会在请求头中携带令牌*/instance . interceptors . Request . use(config={//在登录过程控制中，根据本地是否有令牌来判断用户的登录状态//但即使有令牌，也有可能令牌过期，所以在每次请求头中都携带令牌。//后台根据携带的令牌判断用户的登录状态，并返回相应的状态码给我们。//然后我们可以根据响应拦截器中的状态码进行一些统一的操作。const token=store . state . token；token(config . headers . authorization=token)；返回配置；}，Error=Promise.error(error))//响应拦截器实例.拦截器. response . use(//请求成功RES=RES . status==200 promise . resolve(RES)3360 promise . reject(RES)，//请求失败Error={ const { response }=Error If(response){//请求已发送，但不在2xx ErrorHandle (response.status，response.data.message)范围内；return Promise.reject(响应)；} else {//处理断网的情况。//EG3360当请求超时或者网络断开时，更新状态的网络状态。//网络状态控制在app.vue Hide中显示一个全局断网提示组件//至于刷新断网组件检索数据，store.com MIT(‘换网’，false)会在断网组件中说明；} });导出默认实例；这款axios与上一款类似，但有以下变化:
1.移除了以前的get和post方法的封装，创建了一个axios实例，然后通过export default方法导出，这使得使用起来更加灵活。
2.删除了通过环境变量控制baseUrl的值。考虑到接口会有多个不同的域名，我们准备通过js变量来控制接口域名。这将在api中介绍。
3.增加了请求超时，即断网的处理。换个说法，断网时，在vuex中更新网络状态，控制断网提示组件的显示和隐藏。断网提示一般会有重新加载数据的操作，后面会在相应的地方介绍。
4.利用功能，简化代码，尽量保证单一责任原则。
让我们来谈谈api，并考虑一下需求:
1.更加模块化
2.多人开发更方便，有效减少命名冲突的解决。
3.处理接口域名有很多情况。
这里创建了一个新的api文件夹，其中包含了一个index.js和一个base.js，以及多个按照模块划分的接口js文件。Index.js是一个api的出口。base.js管理接口域名，其他js用于管理各个模块的接口。
先放index.js代码:
/* * * API接口的统一出口*//Article模块接口从’ @/API/article ‘导入文章；//其他模块的接口.//导出接口exportdefault {article，//.} index.js是一个api接口的出口，这样api接口就可以按照功能划分成多个模块，有利于多人协同开发。比如一个人只负责一个模块的开发等等。给每个模块中的接口命名也很方便。
base.js:
/* * *接口域名管理*/const base={ sq 3360 ‘ https://xxxx11111.com/API/v1’, BD 3360 ‘ 3358xxxxx
22222.com/api’}export默认基数；通过base.js管理我们的接口域名，不管有多少，都可以在这里定义接口。即使是改装，也很方便。
最后是界面模块的描述，比如上面的article.js:
/** *文章模块接口列表*/导入基础自’。/base ‘；//导入接口域名列表从“@/utils/http”导入axios//Import axios实例从http中创建的“qs”导入QS；//是否根据要求导入qs模块const article={//news list article list(){ return xios . get(` $ { base . sq }/topics `)；}，//新闻详情，演示文章详情(ID，params){ return axios . get(` $ { base . sq }/topic/$ { ID } `, { params : params })；}，//post提交登录(params){ return axios . post(` $ { base . sq }/access token `，QS . stringify(params))；}//其他接口…………}导出默认文章；1.通过直接引入我们打包的axios实例，然后定义接口，调用axios实例并返回，可以更加灵活地使用axios。例如，您可以对post请求中提交的数据执行qs序列化等。
2.所请求的配置更加灵活，您可以针对特定需求进行不同的配置。关于配置的优先级，axios文档明确说明了这个顺序是：lib/defaults.js中找到的库的默认值，然后是实例的defaults属性，最后是请求的config参数。后者将优先于前者。
3.restful风格的界面。您也可以通过这种方式灵活地设置api接口地址。
最后，为了方便api的调用，我们需要将其挂载到vue的原型上。在main.js中：
从“vue”导入vue“从导入应用程序”。/app ‘从导入路由器’。/router’//import路由文件从’导入存储。/store’ ///import vuex文件从’导入api。/api’ //import api接口Vue.prototype. $ api=api//在vue的原型上挂载api，然后我们可以这样调用页面中的接口，例如：
方法： {onload (ID) {this。$ api.article.article详细信息(ID，{API 3360 123})。然后(RES={//执行一些操作})}再提一下断网的处理。这里只是一个简单的例子：
我没有互联网。恢复精神
这是app.vue下面简单演示一下断网。http.js中介绍过，当网络断开时我们会在vue中更新网络的状态，所以这里我们根据网络的状态来判断是否需要加载这个断开的组件。当网络断开时，加载断开的组件，而不加载相应页面的组件。单击refresh时，我们可以通过跳转到refesh页面然后立即返回来检索数据。因此，我们需要创建一个新的refresh.vue页面，并在其beforeRouteEnter钩子中返回到当前页面。
//refresh . vuebeforeroutenter(to，from，next) {next (VM={VM。$ router.replace(来自。fullpath)}}这是一个全球通用的断网提示。当然也可以根据自己的项目要求来操作。
暂无讨论，说说你的看法吧
