vue 使用axios 數據請求第三方插件的使用教程詳解

2019-11-19 11:13:40

字體：大中小

來源：轉載

供稿：網友

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錯誤，并重新跳入登頁重新獲取tokenaxios.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 qsimport 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.HOSTconst 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/>'})

　　本地成功請求數據效果：