vue 使用axios 數據請求第三方插件的使用

時間 2019-12-07

標籤 vue 使用 axios 數據請求第三方插件简体版

原文原文鏈接

axios

基於http客戶端的promise，面向瀏覽器和nodejsjavascript

特點

瀏覽器端發起XMLHttpRequests請求css
node端發起http請求html
支持Promise APIvue
監聽請求和返回java
轉化請求和返回node
取消請求webpack
自動轉化json數據ios
客戶端支持抵禦git

安裝

使用npm：github

$ 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)
});

 if(config.method=='post'){
    config.data=QS.stringify(config.data);//防止post請求參數沒法傳到後臺
  }
這句能夠直接代替

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';//配置請求頭信息。


vue 訪問本地json文件的數據測試配置方法
第一步，準備json數據
json文件位置：src/data/data.json
第二步，配置webpack.dev.conf.js 文件
在webpack.dev.config.js 裏面添加以下代碼：

// 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/>'
})

　　本地成功請求數據效果：