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 相关文章推荐
htm调用JS代码
Mar 15 Javascript
Jquery+CSS3实现一款简洁大气带滑动效果的弹出层
May 15 Javascript
jQuery filter函数使用方法
May 19 Javascript
JavaScript定义类和对象的方法
Nov 26 Javascript
javascript实现动态加载CSS
Jan 26 Javascript
在JavaScript中操作时间之getMonth()方法的使用
Jun 10 Javascript
JavaScript实现页面跳转的几种常用方式
Nov 28 Javascript
一种新的javascript对象创建方式Object.create()
Dec 28 Javascript
jQuery实现带遮罩层效果的blockUI弹出层示例【附demo源码下载】
Sep 14 Javascript
Jquery Fade用法详解
Nov 06 jQuery
手写Vue源码之数据劫持示例详解
Jan 04 Vue.js
动态实现element ui的el-table某列数据不同样式的示例
Jan 22 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和ACCESS写聊天室(二)
2006/10/09 PHP
PHP扩展编写点滴 技巧收集
2010/03/09 PHP
让PHP以ROOT权限执行系统命令的方法
2011/02/10 PHP
PHP不用递归实现无限分级的例子分享
2014/04/18 PHP
一个比较不错的PHP日历类分享
2014/11/18 PHP
jQuery Mobile + PHP实现文件上传
2014/12/12 PHP
php微信公众账号开发之前五个坑(一)
2016/09/18 PHP
PHP与Perl之间知识点区别整理
2019/03/19 PHP
laravel框架模型和数据库基础操作实例详解
2020/01/25 PHP
关于恒等于(===)和非恒等于(!==)
2007/08/20 Javascript
ExtJs 3.1 XmlTreeLoader Example Error
2010/02/09 Javascript
判断目标是否是window,document,和拥有tagName的Element的代码
2010/05/31 Javascript
jquery插件制作 表单验证实现代码
2012/08/17 Javascript
jquery清空textarea等输入框实现代码
2013/04/22 Javascript
浅析ajax请求json数据并用js解析(示例分析)
2013/07/13 Javascript
jQuery中ajax的load()方法用法实例
2014/12/26 Javascript
浅析四种常见的Javascript声明循环变量的书写方式
2015/10/14 Javascript
Nodejs初级阶段之express
2015/11/23 NodeJs
Vue.js每天必学之计算属性computed与$watch
2016/09/05 Javascript
Vue自定义指令详解
2017/07/28 Javascript
关于预加载InstantClick的问题解决方法
2017/09/12 Javascript
微信小程序使用radio显示单选项功能【附源码下载】
2017/12/11 Javascript
Vue的实例、生命周期与Vue脚手架(vue-cli)实例详解
2017/12/27 Javascript
vue里面父组件修改子组件样式的方法
2018/02/03 Javascript
vue2.0.js的多级联动选择器实现方法
2018/02/09 Javascript
vue3.0 CLI - 2.3 - 组件 home.vue 中学习指令和绑定
2018/09/14 Javascript
搭建一个nodejs脚手架的方法步骤
2019/06/28 NodeJs
小程序实现左滑删除效果
2019/07/25 Javascript
[00:35]2016完美“圣”典风云人物:冷冷宣传片
2016/12/08 DOTA
Python使用reportlab将目录下所有的文本文件打印成pdf的方法
2015/05/20 Python
Python3中函数参数传递方式实例详解
2019/05/05 Python
公司总经理工作职责管理办法
2014/02/28 职场文书
《长征》教学反思
2014/04/27 职场文书
实习生个人总结范文
2015/02/28 职场文书
2019通用版劳动合同范本!
2019/07/11 职场文书
宫崎骏十大动画电影,宫崎骏好看的动画电影排名
2022/03/22 日漫