vue使用axios数据请求使用第三方插件

编辑：宝哥软件园来源：互联网时间：2021-08-21

新天龙八部

角色扮演 | 1.85G

评分

立即下载

爱可信

基于http客户端的承诺，面向浏览器和节点

特性

浏览器端发起XMLHttpRequests请求，节点端发起http请求。承诺应用编程接口监控请求并返回转换请求和取消请求。自动转换json数据客户端支持防御

装置

使用npm:

$ npm i axiso

为了解决post默认使用x-www-from-urlencoded请求数据，因此请求参数无法传递到后台的问题，需要安装一个插件QS

$ npm安装qs

一个订单全部解决

$ npm安装-保存axios vue-axios qs

在vue中使用axios的两种方法

方法-:修改原型链

首先在main.js中引入axios

从“Axiso”导入axiso

此时，axios命令不能用于其他组件。但是如果把axios改写成Vue的原型属性，这个问题就可以解决了

Vue.prototype.$axios=Axios

配置后，它可以在全局范围内使用

示例：在main.js中使用

获取请求：

//用给定的ID$axios.get('/user？ID=1234 ')。然后(function(response){ console . log(response)；}).catch(函数)(错误){ console.log(错误)；});发布请求

$axios.post('/user '，{ firstName: 'Fred '，lastName: ' Flintstone ' })。然后(函数(响应){ console.log(响应)；}) .catch(函数)(错误){ console.log(错误)；});为了确保请求的数据是正确的，可以在main.js中配置以下内容：

axios . defaults . BaseURl=' https://API . example.com '；//配置您的接口请求地址axios . defaults . headers.common[' authorization ']=auth _ token；//配置令牌，并酌情使用axios . defaults . headers . post[' content-type ']=' application/x-www-form-URL encoded '；//配置请求头信息。那么最基本的配置已经完成了，但是还是有问题。由于前端和后端是分开的，跨域数据请求的问题无法避免。接下来，需要跨域配置。

下面的代码是在config/index.js的dev中配置的：

代理表： { '/API ' : { Target : ' http://XXX . XXX . xxx33608081/'，//设置你调用的接口域名和端口号。不要忘记添加http changeOrigin: true。path rewrite : { '/api ' : '/'//这里理解为“/api”是用来替换target中的地址，当我们在后面的组件中丢弃接口时，我们直接用API来代替。比如我想调用' http://XXX . XXX . XXX 33608081/user/add '，直接写'/API。

dev : {//path assets subdirector : ' static '，assets publicatpath : '/'，Proxy table : { '/API ' : { Target : ' http://XXX . XXX . xxx33608081/'，//设置您调用的接口域名和端口号。不要忘记添加http changeOrigin: true。path rewrite : { '/api ' : '/'//这里理解为用'/api '代替目标中的地址，当我们在后面的组件中丢弃接口时，我们直接用API代替，比如我想调用' http://XXX . XXX . xxx33608081/user/add '。只需写“/API/user/add”} }，但注意这只是解决了开发环境(dev)中的跨域问题，如果实际部署到生产环境中的服务器上，就存在跨域问题。

axios拦截器的使用

当我们访问一个地址页面时，有时会要求我们在访问该页面之前重新登录，即身份认证无效，例如令牌丢失，或者令牌在本地仍然存在，但是无效，因此单独判断本地是否有令牌值并不能解决问题。此时，当请求时，服务器返回401错误，这意味着它无权访问该页面。

我们可以在发送所有请求和操作服务器响应数据之前过滤这种情况。

//http请求请求拦截器，有代币值则配置上代币值axios。拦截。请求。使用(config={ if(token){//每次发送请求之前判断是否存在令牌，如果存在，则统一在超文本传送协议(超文本传输协议的缩写)请求的页眉都加上令牌，不用每次请求都手动添加了配置头。授权=令牌；}返回配置；}，err={ return Promise。拒绝(错误)；});//http响应服务器响应拦截器，这里拦截401错误，并重新跳入登页重新获取令牌axios。拦截器。回应。使用(response={ return response},错误={ if(错误。响应){ switch(错误。回应。状态){案例401://这里写清除代币的代码路由器。替换({路径： '登录'，查询： {重定向：路由器。电流输出。完整路径}//登录成功后跳入浏览的当前页面}) } }返回答应我。拒绝(错误。回应。数据)})；安装全国工业产品生产许可证插件后的简化操作

$ npm从“QS”/axios安装qsimport QS拦截器//超时时间axios。默认值。超时=5000；//http请求拦截器请求之前的一些操作axios。拦截器。请求。使用(config={ if(config。方法==' post '){ config。数据=QS。stringify(配置。数据)；//防止邮政请求参数无法传到后台}返回配置},错误={消息。错误({消息： }加载超时' });返回承诺。拒绝(错误)});//http响应拦截器请求之后的操作axios。拦截器。回应。使用(数据={返回数据},错误={ Message.error({ message: '加载失败' });返回承诺。拒绝(错误)});span style='color: rgb(255，0，0)；if(配置。方法==' post '){ config。数据=QS。stringify(配置。数据)；//防止邮政请求参数无法传到后台}/spanbr这句可以直接代替span style='color: rgb(255，0，0)；axios。默认值。BaseURl=' https://API。例子。com '；//配置你的接口请求地址axios。默认值。标题。公共[' Authorization ']=AUTH _ TOKEN；//配置令牌，看情况使用axios。默认值。标题。post[' Content-Type ']=' application/x-www-form-URL编码'；//配置请求头信息/span br span style=' font-size : 14pt；'某视频剪辑软件访问本地数据文件的数据测试配置方法英国铁路公司第一步，准备数据数据brjson文件位置：src/data/data.jsonbr第二步，配置webpack.dev.conf.js文件英国铁路公司在webpack.dev.config.js里面添加如下代码：br/span//webpack.dev.conf.js//通过表达导入路由const express=require(' express ')const app=express()var appData=require('./src/data/data.json')//json卖家数据定义变量卖家appData.seller//JSON商品数据定义变量货物appData.goods//JSON评论数据定义变量评级=appData.ratings//编写路由var apiRoutes=express .路由器()//所有通过接口相关的美国石油学会(美国石油协会)都会通过美国石油学会(美国石油协会)这个路由导向到具体的路由app.use('/api '，apiRoutes)//devServer下写入如下代码：之前(app){ app。get('/API/seller '，(req，res)={ res.json({ errno: 0，data: seller })//接口返回数据数据，上面配置的数据卖方就赋值给数据请求后调用})，app.get('/api/goods '，(req，res)={ res.json({ errno: 0，data: goods }) })，app.get('/api/ratings '，(req，RES)={ RES . JSON({ errno : 0 0，data: ratings }) })按照如上配置就大功告成了，webpack.dev.config.js完整代码如下：

使用严格的const utils=require ./utils ')const web pack=require(' web pack ')const config=require('./config ')const merge=require(' web pack-merge ')const path=require(' path ')const base web pack config=require(' ./web pack。基地。conf ')const copy web pack plugin=require(' copy-web pack-plugin ')const html web pack plugin=require(' html-web pack-plugin ')const friendyerrorsplugin=require(' friend-errors-web pack-plugin ')const portfinder=require(' portfinder ')//web pack . dev . conf . js//通过表达导入路由const express=require(' express ')const app=express()var appData=require('./src/data/data.json')//json卖家数据定义变量卖家appData.seller//JSON商品数据定义变量货物appData.goods//JSON评论数据定义变量评级=appData.ratings//编写路由var apiRoutes=express .路由器()//所有通过接口相关的美国石油学会(美国石油协会)都会通过美国石油学会(美国石油协会)这个路由导向到具体的路由app.use('/api '，API routes)const HOST=process。环境。HOST const PORT=进程。环境。端口号(进程。环境。PORT)const devWebpackConfig=merge(basebpackconfig，{ module : { ruless 3360 utils。样式加载器({源地图： config。戴夫。CSS源代码映射，usepostscripts : true })}，//便宜-模块-评估-来源-地图对于开发devtool:配置更快. */，到：路径。POSIX。加入(配置。戴夫。资产公共路径，' index.html') }，]，}，hot: true，contentBase: false，//因为我们使用了CopyWebpackPlugin .compress: true，host: HOST || config.dev.host，port: PORT || config.dev.port，open : config。戴夫。autoopenbrowser，覆盖：配置。戴夫。错误覆盖？{警告：假，错误：真} :假，公共路径：配置。戴夫。资产公共路径，代理：配置。戴夫。代理表，quiet: true，//friendyerrorsplugin watch options 3360 { poll : config。戴夫。poll，}，先于(app){ app。get('/API/seller '，(req，res)={ res.json({ errno:接口返回数据数据，上面配置的数据卖方就赋值给数据请求后调用})，app.get('/api/goods '，(req，res)={ res.json({ errno: 0，data: goods }) }，app.get('/api/ratings '，(req，RES)={ RES . JSON({ errno : 0 0，data : ratings })})，插件：[新web pack].DefinePlugin({ ' process。env ' :必需('./config/dev。env ' })，新的网络包.HotModuleReplacementPlugin()，新的网络包.NamedModulesPlugin()，//HMR在更新时在控制台中显示正确的文件名。新的网络包NoEmitOnErrorsPlugin()，//https://github.com/ampendandwired/html-web pack-plugin新的html webpackplugin({ filename : ' index。html '，template: 'index.html '，inject: true })，//复制自定义静态资产新的CopyWebpackPlugin([{ from :路径。解析(_ dirname’)./static ')，到： config。戴夫。资产子目录，ignore: [.*]}])})模块。出口=新承诺((解析，拒绝)={ portfinder。baseport=进程。环境。端口| |配置。戴夫。端口查找器。getport((err，Port)={ if(err){ reject(err)} else {//发布新端口，这是e2e测试流程所必需的。环境。PORT=port //将端口添加到devServer config devwebpackconfig。devServer。Port=Port//Add friendyerrorsplugin devwebpackconfig。插件。push(new friendyerrorsplugin({ 0 utils。creatannivercallback(): undefined }))resolve(devWebpackConfig)} })})main。射流研究…完整代码如下：

//要用“导入”命令加载的某视频剪辑软件构建版本//(仅运行时或独立)已在webpack.base.conf中用别名进行了设置。从“Vue”导入Vue "从应用导入"。/App "从导入路由器"。/router '从' Axios '导入Axios '从' QS ' vue导入QS。原型。$ Axios=Axios//原型链配置vue。配置。生产提示=false//axios拦截器//超时时间axios。默认值。超时=5000；//http请求拦截器axios。拦截器。请求。使用(config={ if(config。方法==' post '){ config。数据=QS。stringify(配置。数据)；//防止邮政请求参数无法传到后台}返回配置},错误={消息。错误({消息： }加载超时' });返回承诺。拒绝(错误)});//http响应拦截器axios。拦截器。回应。使用(数据={返回数据},错误={ Message.error({ message: '加载失败' });返回承诺。拒绝(错误)});//注册一个全局自定义指令` v-focus`Vue.directive('focus '，{ //当被绑定的元素插入到数字正射影像图中时……插入：函数(el) { //聚焦元素埃尔。focus()} })/* eslint-disable no-new */new Vue({ El : ' # App '，路由器，组件： { App }，模板： 'App/'})本地成功请求数据效果：