vue 使用axios 数据请求第三方插件的使用教程详解


Posted in Javascript onJuly 05, 2019

axios

基于http客户端的promise,面向浏览器和nodejs

特色

•浏览器端发起XMLHttpRequests请求
•node端发起http请求
•支持Promise API
•监听请求和返回
•转化请求和返回
•取消请求
•自动转化json数据
•客户端支持抵御

安装

使用npm:

$ npm i axiso

为了解决post默认使用的是x-www-from-urlencoded 去请求数据,导致请求参数无法传递到后台,所以还需要安装一个插件QS

$ npm install qs

一个命令全部解决

$ npm install --save axios vue-axios qs

两种方法在vue中使用 axios

方法-:修改原型链

首先在 main.js 中引入 axios

import Axiso from 'axiso'

这时候如果在其它的组件中,是无法使用 axios 命令的。但如果将 axios 改写为 Vue 的原型属性,就能解决这个问题

Vue.prototype.$axios= Axios

 配置好了之后就可以全局使用了

示例:在main.js使用

Get请求:

//发起一个user请求,参数为给定的ID
$axios.get('/user?ID=1234')
.then(function(respone){
  console.log(response);
})
.catch(function(error){
  console.log(error);
});

Post请求

$axios.post('/user', {
  firstName: 'Fred',
  lastName: 'Flintstone'
 })
 .then(function (response) {
  console.log(response);
 })
 .catch(function (error) {
  console.log(error);
 });

为了保证请求的数据正确,可以在main.js配置如下内容:

Axios.defaults.baseURL = 'https://api.example.com';//配置你的接口请求地址
Axios.defaults.headers.common['Authorization'] = AUTH_TOKEN;//配置token,看情况使用
Axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded';//配置请求头信息。

 那么最基本的配置已经完成了,但是还有一个问题,既然是前后端分离,那么肯定避免不了跨域请求数据的问题,接下来就是配置跨域了。

在config/index.js里面的dev里面配置如下代码:

proxyTable: {
   '/api': {
    target: 'http://xxx.xxx.xxx.xxx:8081/',//设置你调用的接口域名和端口号 别忘了加http
    changeOrigin: true,
    pathRewrite: {
     '^/api': '/'//这里理解成用‘/api'代替target里面的地址,后面组件中我们掉接口时直接用api代替 比如我要调用'http://xxx.xxx.xxx.xx:8081/user/add',直接写‘/api/user/add'即可
    }
   }

 完整代码:

dev: {
  // Paths
  assetsSubDirectory: 'static',
  assetsPublicPath: '/',
  proxyTable: {
    '/api': {
    target: 'http://xxx.xxx.xxx.xxx:8081/',//设置你调用的接口域名和端口号 别忘了加http
    changeOrigin: true,
    pathRewrite: {
     '^/api': '/'//这里理解成用‘/api'代替target里面的地址,后面组件中我们掉接口时直接用api代替 比如我 要调用'http://xxx.xxx.xxx.xxx:8081/user/add',直接写‘/api/user/add'即可
    }
   }
  },

但是注意了,这只是开发环境(dev)中解决了跨域问题,生产环境中真正部署到服务器上如果是非同源还是存在跨域问题.

axios拦截器的使用

当我们访问某个地址页面时,有时会要求我们重新登录后再访问该页面,也就是身份认证失效了,如token丢失了,或者是token依然存在本地,但是却失效了,所以单单判断本地有没有token值不能解决问题。此时请求时服务器返回的是401错误,授权出错,也就是没有权利访问该页面。

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

// http request 请求拦截器,有token值则配置上token值
axios.interceptors.request.use(
  config => {
    if (token) { // 每次发送请求之前判断是否存在token,如果存在,则统一在http请求的header都加上token,不用每次请求都手动添加了
      config.headers.Authorization = token;
    }
    return config;
  },
  err => {
    return Promise.reject(err);
  });
// http response 服务器响应拦截器,这里拦截401错误,并重新跳入登页重新获取token
axios.interceptors.response.use(
  response => {
    return response;
  },
  error => {
    if (error.response) {
      switch (error.response.status) {
        case 401:
          // 这里写清除token的代码
          router.replace({
            path: 'login',
            query: {redirect: router.currentRoute.fullPath}//登录成功后跳入浏览的当前页面
          })
      }
    }
    return Promise.reject(error.response.data) 
  });

 安装qs插件后的简化操作

$ npm install qs
import QS from 'qs'
//axios拦截器
// 超时时间
Axios.defaults.timeout = 5000;
// http请求拦截器 请求之前的一些操作
Axios.interceptors.request.use(config => {
 if(config.method=='post'){
  config.data=QS.stringify(config.data);//防止post请求参数无法传到后台
 }
 return config
}, error => {
 Message.error({
  message: '加载超时'
 });
 return Promise.reject(error)
});
// http响应拦截器 请求之后的操作
Axios.interceptors.response.use(data => {
 return data
}, error => {
 Message.error({
  message: '加载失败'
 });
 return Promise.reject(error)
});
<span style="color: rgb(255, 0, 0);"> if(config.method=='post'){
  config.data=QS.stringify(config.data);//防止post请求参数无法传到后台
 }</span><br>这句可以直接代替
<span style="color: rgb(255, 0, 0);">Axios.defaults.baseURL = 'https://api.example.com';//配置你的接口请求地址
Axios.defaults.headers.common['Authorization'] = AUTH_TOKEN;//配置token,看情况使用
Axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded';//配置请求头信息。</span>
<br><span style="font-size: 14pt;">vue 访问本地json文件的数据测试配置方法<br>第一步,准备json数据<br>json文件位置:src/data/data.json<br>第二步,配置webpack.dev.conf.js 文件<br>在webpack.dev.config.js 里面添加如下代码:<br></span>
// webpack.dev.conf.js
// 通过express导入路由
const express = require('express')
const app = express()
var appData = require('../src/data/data.json')
// json卖家数据
var seller = appData.seller
// json商品数据
var goods = appData.goods
// json评论数据
var ratings = appData.ratings
// 编写路由
var apiRoutes = express.Router()
// 所有通过接口相关的api都会通过api这个路由导向到具体的路由
app.use('/api', apiRoutes)
//devServer下写入如下代码:
 before(app) {
   app.get('/api/seller', (req, res) => {
    res.json({
     errno: 0,
     data: seller
    })//接口返回json数据,上面配置的数据seller就赋值给data请求后调用
   }),
    app.get('/api/goods', (req, res) => {
     res.json({
      errno: 0,
      data: goods
     })
    }),
    app.get('/api/ratings', (req, res) => {
     res.json({
      errno: 0,
      data: ratings
     })
    })
  }

按照如上配置就大功告成了,webpack.dev.config.js 完整代码如下:

'use strict'
const utils = require('./utils')
const webpack = require('webpack')
const config = require('../config')
const merge = require('webpack-merge')
const path = require('path')
const baseWebpackConfig = require('./webpack.base.conf')
const CopyWebpackPlugin = require('copy-webpack-plugin')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const FriendlyErrorsPlugin = require('friendly-errors-webpack-plugin')
const portfinder = require('portfinder')
// webpack.dev.conf.js
// 通过express导入路由
const express = require('express')
const app = express()
var appData = require('../src/data/data.json')
// json卖家数据
var seller = appData.seller
// json商品数据
var goods = appData.goods
// json评论数据
var ratings = appData.ratings
// 编写路由
var apiRoutes = express.Router()
// 所有通过接口相关的api都会通过api这个路由导向到具体的路由
app.use('/api', apiRoutes)
const HOST = process.env.HOST
const PORT = process.env.PORT && Number(process.env.PORT)
const devWebpackConfig = merge(baseWebpackConfig, {
 module: {
  rules: utils.styleLoaders({ sourceMap: config.dev.cssSourceMap, usePostCSS: true })
 },
 // cheap-module-eval-source-map is faster for development
 devtool: config.dev.devtool,
 // these devServer options should be customized in /config/index.js
 devServer: {
  clientLogLevel: 'warning',
  historyApiFallback: {
   rewrites: [
    { from: /.*/, to: path.posix.join(config.dev.assetsPublicPath, 'index.html') },
   ],
  },
  hot: true,
  contentBase: false, // since we use CopyWebpackPlugin.
  compress: true,
  host: HOST || config.dev.host,
  port: PORT || config.dev.port,
  open: config.dev.autoOpenBrowser,
  overlay: config.dev.errorOverlay
   ? { warnings: false, errors: true }
   : false,
  publicPath: config.dev.assetsPublicPath,
  proxy: config.dev.proxyTable,
  quiet: true, // necessary for FriendlyErrorsPlugin
  watchOptions: {
   poll: config.dev.poll,
  },
  before(app) {
   app.get('/api/seller', (req, res) => {
    res.json({
     errno: 0,
     data: seller
    })//接口返回json数据,上面配置的数据seller就赋值给data请求后调用
   }),
    app.get('/api/goods', (req, res) => {
     res.json({
      errno: 0,
      data: goods
     })
    }),
    app.get('/api/ratings', (req, res) => {
     res.json({
      errno: 0,
      data: ratings
     })
    })
  }
 },
 plugins: [
  new webpack.DefinePlugin({
   'process.env': require('../config/dev.env')
  }),
  new webpack.HotModuleReplacementPlugin(),
  new webpack.NamedModulesPlugin(), // HMR shows correct file names in console on update.
  new webpack.NoEmitOnErrorsPlugin(),
  // https://github.com/ampedandwired/html-webpack-plugin
  new HtmlWebpackPlugin({
   filename: 'index.html',
   template: 'index.html',
   inject: true
  }),
  // copy custom static assets
  new CopyWebpackPlugin([
   {
    from: path.resolve(__dirname, '../static'),
    to: config.dev.assetsSubDirectory,
    ignore: ['.*']
   }
  ])
 ]
})
module.exports = new Promise((resolve, reject) => {
 portfinder.basePort = process.env.PORT || config.dev.port
 portfinder.getPort((err, port) => {
  if (err) {
   reject(err)
  } else {
   // publish the new Port, necessary for e2e tests
   process.env.PORT = port
   // add port to devServer config
   devWebpackConfig.devServer.port = port
   // Add FriendlyErrorsPlugin
   devWebpackConfig.plugins.push(new FriendlyErrorsPlugin({
    compilationSuccessInfo: {
     messages: [`Your application is running here: http://${devWebpackConfig.devServer.host}:${port}`],
    },
    onErrors: config.dev.notifyOnErrors
    ? utils.createNotifierCallback()
    : undefined
   }))
   resolve(devWebpackConfig)
  }
 })
})

main.js完整代码如下:

// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'
import router from './router'
import Axios from 'axios'
import QS from 'qs'
Vue.prototype.$axios=Axios //原型链配置
Vue.config.productionTip = false
//axios拦截器
// 超时时间
Axios.defaults.timeout = 5000;
// http请求拦截器
Axios.interceptors.request.use(config => {
 if(config.method=='post'){
  config.data=QS.stringify(config.data);//防止post请求参数无法传到后台
 }
 return config
}, error => {
 Message.error({
  message: '加载超时'
 });
 return Promise.reject(error)
});
// http响应拦截器
Axios.interceptors.response.use(data => {
 return data
}, error => {
 Message.error({
  message: '加载失败'
 });
 return Promise.reject(error)
});
// 注册一个全局自定义指令 `v-focus`
Vue.directive('focus', {
 // 当被绑定的元素插入到 DOM 中时……
 inserted: function (el) {
  // 聚焦元素
  el.focus()
 }
})
/* eslint-disable no-new */
new Vue({
 el: '#app',
 router,
 components: { App },
 template: '<App/>'
})

本地成功请求数据效果:

vue 使用axios 数据请求第三方插件的使用教程详解

<span style="font-size: 14pt;"> </span>

总结

以上所述是小编给大家介绍的vue 使用axios 数据请求第三方插件的使用教程详解,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!
如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!

Javascript 相关文章推荐
用javascript实现计算两个日期的间隔天数
Aug 14 Javascript
用于判断用户注册时,密码强度的JS代码
Jan 01 Javascript
javascript 动态生成私有变量访问器
Dec 06 Javascript
Javascript 高阶函数使用介绍
Jun 15 Javascript
js实现悬浮窗效果(支持拖动)
Mar 09 Javascript
阿里大于短信验证码node koa2的实现代码(最新)
Sep 07 Javascript
JavaScript实现多重继承的方法分析
Jan 09 Javascript
React为 Vue 引入容器组件和展示组件的教程详解
May 03 Javascript
vue-cli 脚手架基于Nightwatch的端到端测试环境的过程
Sep 30 Javascript
Vue入门之数量加减运算操作示例
Dec 11 Javascript
Node.js + express基本用法教程
Mar 14 Javascript
elementUI vue this.$confirm 和el-dialog 弹出框 移动 示例demo
Jul 03 Javascript
vue中实现Monaco Editor自定义提示功能
Jul 05 #Javascript
VueCli3.0中集成MockApi的方法示例
Jul 05 #Javascript
Electron vue的使用教程图文详解
Jul 05 #Javascript
监控微信小程序中的慢HTTP请求过程详解
Jul 05 #Javascript
JS实现求字符串中出现最多次数的字符和次数示例
Jul 05 #Javascript
JS Math对象与Math方法实例小结
Jul 05 #Javascript
js字符串类型String常用操作实例总结
Jul 05 #Javascript
You might like
php empty() 检查一个变量是否为空
2011/11/10 PHP
Apache下禁止php文件被直接访问的解决方案
2013/04/25 PHP
highchart数据源纵轴json内的值必须是int(详解)
2017/02/20 PHP
完美解决JS中汉字显示乱码问题(已解决)
2006/12/27 Javascript
JS获取并操作iframe中元素的方法
2013/03/21 Javascript
js浏览器本地存储store.js介绍及应用
2014/05/13 Javascript
JavaScript中实现继承的三种方式和实例
2015/01/29 Javascript
JQuery日期插件datepicker的使用方法
2016/03/03 Javascript
js 定位到某个锚点的方法
2016/11/19 Javascript
jQuery加载及解析XML文件的方法实例分析
2017/01/22 Javascript
详解用webpack2.0构建vue2.0超详细精简版
2017/04/05 Javascript
vue.js删除动态绑定的radio的指定项
2017/06/02 Javascript
vue中如何动态绑定图片,vue中通过data返回图片路径的方法
2018/02/07 Javascript
详解Vue+axios+Node+express实现文件上传(用户头像上传)
2018/08/10 Javascript
ES6基础之数组和对象的拓展实例详解
2019/08/22 Javascript
JS面向对象编程实现的Tab选项卡案例详解
2020/03/03 Javascript
Vue 电商后台管理项目阶段性总结(推荐)
2020/08/22 Javascript
详解node.js创建一个web服务器(Server)的详细步骤
2021/01/15 Javascript
[40:05]DOTA2上海特级锦标赛A组小组赛#1 EHOME VS MVP.Phx第一局
2016/02/25 DOTA
[01:59][TI9趣味视频] 全明星赛奖励
2019/08/23 DOTA
python网络编程学习笔记(六):Web客户端访问
2014/06/09 Python
教你如何在Django 1.6中正确使用 Signal
2014/06/22 Python
python实现根据ip地址反向查找主机名称的方法
2015/04/29 Python
对dataframe进行列相加,行相加的实例
2018/06/08 Python
set在python里的含义和用法
2019/06/24 Python
python不到50行代码完成了多张excel合并的实现示例
2020/05/28 Python
html5-websocket基于远程方法调用的数据交互实现
2012/12/04 HTML / CSS
法国体育用品商店:GO Sport
2019/10/23 全球购物
Java中的异常处理机制的简单原理和应用
2013/04/27 面试题
制冷与电控专业应届生求职信
2013/11/11 职场文书
单位人事专员介绍信
2014/01/11 职场文书
教师党员承诺书
2014/03/25 职场文书
低碳环保标语
2014/06/12 职场文书
篮球社团活动总结
2014/06/27 职场文书
2014入党积极分子批评与自我批评思想报告
2014/10/06 职场文书
迎新年主持词
2015/07/06 职场文书