vue中axios和koa2的基本用法

koa2的作用和express都差不多，都是在common.js环境下运行
都是用来构建服务器

koa2

npm init // 初始化
npm install koa2 --save  // 安装koa2框架
npm install koa-router --save // 安装koa2中间件	

axios（和ajax作用一样）

npm install axios --save // 安装axios
<script src="./node_modules/axios/dist/axios.js"></script> 
// 下载下来只会由于现阶段用的都是script引入js，不是webpack不能通过import引用模块

server.js （创建服务的js文件）

是基于promise对象的技术

const Koa = require('koa2'); // 加载koa2模块
let app = new Koa(); // 实例化
const Router = require('koa-router');
const router = new Router();
router.get('/',async ctx => { // 设置路由  ctx是request和reponse的结合
  ctx.body = { // 响应到页面中的数据 ctx.body代表报文的主体
    token:'abc', // 通过axios会直接把body中的内容返回
    msg:'ok'
  };
})
app.use( router.routes() ); //把router对象的routes挂载到app上不然找不到，使用这个中间件
app.listen(9999,() => { // 对服务的监听
	console.log("服务启动成功端口号为9999")
})

前台用来获取数据的页面，这个页面没有必要必须挂载到服务器上

var App = {
			template:`
				<div>
					<button @click = 'sendAjax'>发请求</button>
				</div>
			`,
			methods:{
				sendAjax(){
					this.$axios.get('http://127.0.0.1:9999/') // 对本地的服务器发出请求
					.then(res=>{
						console.log(res);
					})
					.catch(err=>{
						console.log(err);
					})
				}
			}
		};
		Vue.prototype.$axios = axios // 将axios.js暴露出的axios对象给Vue的原型主要就可以在vue中直接使用了
			new Vue({
			el:'#app',
			template:`<App />`,
			components:{
				App
			}
		});

返回的req和res集合的对象data是ctx.body中的数据
axios是一种基于promise的技术

router.post('/upload',async (ctx,next)=>{
  console.log('上传成功')
  ctx.body = 'ok';
})
.post('/add',async ctx => {
  ctx.req.on('data',data=>{
      console.log(data);  // <Buffer 61 3d 31>
      console.log(data.toString()); // a = 1
  });
  ctx.body = 'post ok';
});

前端的js

var App = {
			data(){
				return {
					res1:"",
					res2:''
				}
			},
			template:`
				<div>
					响应1：{{res1}}
					响应2：{{res2}}
					<button @click = 'sendAjax'>合并强求</button>
				</div>
			`,
			methods:{
				sendAjax(){
					// 请求1 get:  /
					// 请求 post : /add
					this.$axios.defaults.baseURL = 'http://127.0.0.1:8888';
					// 设置请求的默认路径
					var q1 = this.$axios.get('/'); // 请求 / 
					var q2 = this.$axios.post('/add','a=1'); // 请求 /add
					this.$axios.all([q1,q2]) // 同时发出请求 解决高并发的问题
					.then(this.$axios.spread((res1,res2)=>{ // 请求结束后获取对应的报表对象
					// all会等待最后一个执行结束后开始返回内容
						// 全部成功了
						this.res1 = res1.data;
						this.res2 = res2.data;
					}))
					.catch(err=>{
						// 其一失败
						console.log(err);
					})
				}
			}
		};
		Vue.prototype.$axios = axios
		new Vue({
			el:'#app',
			template:`<App />`,
			components:{
				App
			}
		});

事件触发后

transformResponse和 transformRequest

用来在请求前和请求后对提交和获取的数据进行处理
可以通过修改data的内容来改变获取或提交的内容

// 公用上面我创建的服务
 var App = {
        template: `
				<div>
					<button @click = 'sendAjax'>发请求</button>
				</div>
			`,
        methods: {
            sendAjax() {

                this.$axios.defaults.baseURL = 'http://127.0.0.1:8888/'
                this.$axios.get('', {
                        params: { id: 1 }, // 和要请求发出的数据在一个对象中
                        // 在传递给then/catch之前，允许修改响应的数据
                        transformResponse: [function(data) {
                            // 对 data 进行任意转换处理
                            // 会将data转化为json类型的数据方便出来
                            console.log(data); // string类型的{"token":"abc","msg":"ok"}
                            console.log(typeof data); // string 我测试的时候是只要使用transformResponsedata传来的就是string类型的
                            data = JSON.parse(data); // 对获取的data进行出来
                            console.log(data); // 假如我在这里给data重新赋一个值他的下面res接受到的内容就会发生变化
                            return data; // 如果中间什么都不写 会返回undefinded
                        }]
                    })
                    .then(res => {
                        console.log(res.data.msg); // ok
                    })
                    .catch(err => {
                        console.log(err);
                    })
                this.$axios.post('/add', {
                        firstName: 'Fred' 
                        // 这是我要提交到后台的数据
                    }, {
                        // `transformRequest` 允许在向服务器发送前，修改请求数据
                        // 只能用在 'PUT', 'POST' 和 'PATCH' 这几个请求方法
                        // 后面数组中的函数必须返回一个字符串，或 ArrayBuffer，或 Stream
                        transformRequest: [function(data) {
                            // 对 data 进行任意转换处理 这里不会转化为json类型
                            console.log(data); //对象类型的{firstName: "Fred"}
                            return data; // 如果我改变data的话提交的内容会发生变化
                        }],

                    })
                    .then(res => {
                        console.log(res);
                    })
                    .catch(err => {
                        console.log(err);
                    })
            }
        }

    };
    Vue.prototype.$axios = axios
    new Vue({
        el: '#app',
        template: `<App />`,
        components: {
            App
        }
    });