目录
-
一、前期准备
-
1.1 参考文章
下面实战内容，是通过3个基本文件的基础上操作的，请自行下载！！！
㊯ 百度网盘分享
-
1.2 webpack 三部曲
依赖和配置文件编写：
npm install webpack --save-dev
npm install webpack-cli --save-dev（如果全部安装，则无需执行）
npm config set registry https://registry.npm.taobao.org
npm install html-webpack-plugin --save-dev
/* ../vue-axios/webpack.config.js */
var HtmlWebpackPlugin = require('html-webpack-plugin')
module.exports = {
entry: __dirname + "/app/main.js",
output: {
path: __dirname + "/public",
filename: "bundle.js"
},
plugins: [
new HtmlWebpackPlugin()
]
}-
一、axios 打包
-
1.1 实战
- 1.1.1 main.js 修改
当前需求我们要请求菜鸟教程ajax中的一个经典案例，通过请求https://www.runoob.com/try/ajax/json_demo.json，将返回的数据打印到控制台上；
所以 main.js 仅仅引入请求的service服务内容！！
// 简易项目中安装，http请求依赖包
npm i axios -S
// 通过参考文章中 —— 导入导出2，我们可以知道有两种引入方式
// 方法1
import {getListAPI} from './api/api.js'
getListAPI().then(res => console.log(res)).catch(err => console.log(err))
// 方法2
// import * as way2 from '../api/api.js';
// way2.getListAPI().then(res => console.log('way1',res)).catch(err => console.log(err))- 1.1.2 新增 ./vue-axios/app/util/ request.js 文件
这里是处理错误，在Vue项目中会利用element-ui Message做消息提醒，这里用alert更明显一些。
/**** request.js ****/
// 导入axios
import axios from 'axios'
// 使用element-ui Message做消息提醒
/* import {
Message
} from 'element-ui'; */
//1. 创建新的axios实例，
const service = axios.create({
// 公共接口--这里注意后面会讲
baseURL: process.env.BASE_API,
// 超时时间 单位是ms，这里设置了3s的超时时间
timeout: 3 * 1000
})
// 2.请求拦截器
service.interceptors.request.use(config => {
//发请求前做的一些处理，数据转化，配置请求头，设置token,设置loading等
// const token = getCookie('名称');注意使用的时候需要引入cookie方法，推荐js-cookie
config.data = JSON.stringify(config.data);
config.headers = {
'Content-Type': 'application/x-www-form-urlencoded'
}
// if(token){
// config.params = {'token':token}
// }
return config
}, error => {
Promise.reject(error)
})
// 3.响应拦截器
service.interceptors.response.use(response => {
//接收到响应数据并成功后的一些共有的处理，关闭loading等
return response
}, error => {
/***** 接收到异常响应的处理开始 *****/
if (error && error.response) {
// 1.公共错误处理
// 2.根据响应码具体处理
switch (error.response.status) {
case 400:
error.message = '错误请求'
break;
case 401:
error.message = '未授权，请重新登录'
break;
case 403:
error.message = '拒绝访问'
break;
case 404:
error.message = '请求错误,未找到该资源'
window.location.href = "/NotFound"
break;
case 405:
error.message = '请求方法未允许'
break;
case 408:
error.message = '请求超时'
break;
case 500:
error.message = '服务器端出错'
break;
case 501:
error.message = '网络未实现'
break;
case 502:
error.message = '网络错误'
break;
case 503:
error.message = '服务不可用'
break;
case 504:
error.message = '网络超时'
break;
case 505:
error.message = 'http版本不支持该请求'
break;
default:
error.message = `连接错误${error.response.status}`
}
} else {
// 超时处理
if (JSON.stringify(error).includes('timeout')) {
// Message.error('服务器响应超时，请刷新当前页')
alert('服务器响应超时，请刷新当前页')
}
error.message('连接服务器失败')
}
// Message.error(err.message)
alert(err.message)
/***** 处理结束 *****/
//如果不需要错误处理，以上的处理过程都可省略
return Promise.resolve(error.response)
})
//4.导入文件
export default service
- 1.1.3 新增 ./vue-axios/app/util/ http.js 文件
这里是封装post、get、put、delete、normal请求，normal是用来测试当前http.js文件是否正常可使用：
/**** http.js ****/
// 导入封装好的axios实例
import request from './request'
const http = {
/**
* methods: 请求
* @param url 请求地址
* @param params 请求参数
*/
get(url, params) {
const config = {
methods: 'get',
url: url
}
if (params) config.params = params
return request(config)
},
post(url, params) {
const config = {
methods: 'post',
url: url
}
if (params) config.data = params
return request(config)
},
put(url, params) {
const config = {
methods: 'put',
url: url
}
if (params) config.params = params
return request(config)
},
delete(url, params) {
const config = {
methods: 'delete',
url: url
}
if (params) config.params = params
return request(config)
},
normal() {
console.log('http.js 运行正常')
}
}
//导出
export default http
- 1.1.4 新增 ./vue-webpack/vue-axios/app/api/ api.js 文件
这里是java对应的请求服务service：
import http from '../util/http.js'
//
/**
* @parms resquest 请求地址 例如：http://XXX.XX.XX:8088/...
* @param '/api'代表vue-cil中config，index.js中配置的代理
*/
let resquest = "/api"
/* export function getListAPI() {
// return http.get('/try/ajax/json_demo.json');
return http.get('/try/ajax/json_demo.json');
} */
export const getListAPI = () => http.get('/try/ajax/json_demo.json');
测试方式：
在简易项目中，执行
webpack-dev-server
命令，然后我们会发现已经可以用了，但是会报跨域错误和无法定位异常，如下图所示：
-
三、错误图例
-
3.1 跨域问题
- 3.1.1 跨域问题参考文章
- 3.1.2 webpack.config.js 解决代码
devServer: {
// port:8081, 不要配置
proxy: {
'/api': {
target: 'https://www.runoob.com',
pathRewrite: {
// '^/api': '/api' // 这种接口配置出来 http://XX.XX.XX.XX:8083/api/login
'^/api': '' // 这种接口配置出来 http://XX.XX.XX.XX:8083/login
}
}
}
}-
3.2 定位异常
在 webpack.config.js 中配置
devtool: 'cheap-module-eval-source-map' （开发环境）
效果图：
-
四、vue整合
-
4.1 百度网盘资源
下面实战内容，是通过上面的案例，整合的vue axios项目，需要的人请自行下载！！！
-
4.2 关于请求通知Message.xx
请求之后按照请求的status值，利用element-ui样式进行提示：
在request.js文件中
如果使用的是Message如下所示：
// 在./node_modules/element-ui/lib/message.js 存在message.js
// 在 ./src/util/request.js中，Message必须大写
import {
Message
} from 'element-ui';
...
// 3.响应拦截器
service.interceptors.response.use(response => {
//接收到响应数据并成功后的一些共有的处理，关闭loading等
Message.info('请求成功')
return response
}, error => {
...效果
-
4.3 关于请求通知Notification.xx
// 在./node_modules/element-ui/lib/notification.js 存在notification.js
// 在 ./src/util/request.js中，Notification必须大写
import {
Notification
} from 'element-ui';
...
// 3.响应拦截器
service.interceptors.response.use(response => {
//接收到响应数据并成功后的一些共有的处理，关闭loading等
Notification.info('请求成功')
return response
}, error => {
...效果
