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

//發起一個user請求，參數為給定的ID
$axios.get('/user?ID=1234')
.then(function(respone){
 console.log(response);
})
.catch(function(error){
 console.log(error);
});

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

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

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'即可
 }
 }
 },

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

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

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

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

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