初识 webpack（十一）axios的post / get 请求封装 和状态返回通知

目录

一、前期准备

1.1 参考文章

1.1 百度网盘资源

1.2 webpack 三部曲

一、axios 打包

1.1 实战

三、错误图例

3.1 跨域问题

3.2 定位异常

四、vue整合

4.1 百度网盘资源

4.2 关于请求通知Message.xx

4.3 关于请求通知Notification.xx

---

• 一、前期准备

• 1.1 参考文章

1. 代码参考文章1
2. 导入导出文章2

• 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 文件