Vue 0基础学习路线（15）—— 图解深度详述Vue异步请求和跨域、正向代理本地开发及详细案例（附详细案例代码解析过程及版本迭代过程）

1. 重点提炼

• 异步请求
  • axios
• 跨域

2. Koa搭建后台服务

做一个本地后端：

yarn init

yarn add koa koa-router

这里小迪就不细说了，有问题就看小迪关于node的blog吧，我这里直接拷贝之前代码，执行yarn安装依赖

\server01\app.js

const Koa = require('koa');
const KoaRouter = require('koa-router');
const KoaBodyParser = require('koa-bodyparser')

let datas = {
    items: require('./data/items.json'),
    users: require('./data/users.json')
}

const app = new Koa();

let currentId = 20;

app.use( async (ctx, next) => {
    await next();
} );

app.use(KoaBodyParser());

const router = new KoaRouter();

router.get('/', async ctx => {
    ctx.body = 'api';
});

router.get('/items', async ctx => {
    let sort = ctx.request.query.sort || 'desc';
    let items = datas.items.sort((a, b) => sort === 'asc'  ? a.price - b.price : b.price - a.price);

    ctx.body = items;
});

router.get('/item/:id', async ctx => {
    let id = Number(ctx.params.id);
    let item = datas.items.find(item => item.id === id);

    await new Promise(resolve => {
        setTimeout(_=>resolve(), 2000);
    });

    if (!item) {
        ctx.throw(404, '没有该商品信息');
        return;
    }

    ctx.body = item;
    
});

router.post('/add', async ctx => {
    let {name} = ctx.request.body;

    if (name === '') {
        ctx.body = {
            code: 1,
            message: '商品名称不能为空'
        }
        return;
    }

    let newData = {
        id: currentId++,
        name
    };

    datas.items.unshift(newData);

    ctx.body = {
        code: 0,
        message: '提交成功',
        data: newData
    }
})

app.use( router.routes() );

app.listen(7777);

3. 异步请求

在实际的应用开发中，与后端交互，进行异步请求是很常见的需求

3.1 axios

npm i axios
yarn add axios

3.2 请求

// home.vue
<template>
  <div class="home">
    Home
  </div>
</template>

<script>
import axios from 'axios';
export default {
  name: 'home',
  data() {
    return {
      items: []
    }
  },
  created() {
    axios({
      url: 'http://localhost:7777/items'
    }).then(res => {
      this.items = res.data;
    });
  }
}
</script>

3.3 example01

\app\src\views\Home.vue

<template>
    <div>
        Home
    </div>
</template>

<script>
    import axios from 'axios'

    export default {
        name: "Home",

        data() {
            return {
                items: []
            }
        },

        async created() {
            let rs= await axios({
                url:'http://localhost:7777/items'
            });

            this.items = rs.data;

            console.log(this.items);
        }
    }
</script>

由于跨域报错了！一般线上解决是配置代理服务器，或者用cors处理跨域问题。

本地开发跨域的话，我们设置一下本地vue配置。（上一篇我讲过vue配置文件怎么配置）

参考：https://https://github.com/6xiaoDi/blog-vue-Novice/tree/a1.73
Branch： branch05

commit description：a1.73（example01——axios接收数据出现跨域问题）

tag：a1.73

4. 跨域

vue-cli 提供了一个内置基于 node 的 webserver ，我们可以使用它提供的 proxy 服务来进行跨域请求代理

4.1 vue.config.js

在项目的根目录下创建一个 vue.config.js 的文件，通过 npm run serve 启动服务的时候，会读取该文件

4.2 跨域请求代理配置

// vue.config.js
module.exports = {
  devServer: {
    proxy: {
      '/api': {
        target: 'http://localhost:7777',
        pathRewrite: {
          '^/api': ''
        }
      }
    }
  }
}

修改配置文件，需要重启服务：npm run serve

// home.vue
<script>
...
created() {
  axios({
  	url: '/api/items'
  }).then(res => {
  	this.items = res.data;
	});
}
...
</script>

4.3 example02

4.3.1 example02-1

\app\src\views\Home.vue

        async created() {
            let rs= await axios({
                url:'/items'
            });
 
            this.items = rs.data;
 
            console.log(this.items);
        }

url:'/items' 请求 会被devServer拦截，proxy转发给 http://localhost:7777

\app\vue.config.js

 
module.exports = {
 
    devServer: {
        proxy: {
            '/items': {
                target: 'http://localhost:7777'
            }
        }
    }
 
};

参考：https://https://github.com/6xiaoDi/blog-vue-Novice/tree/a1.74
Branch： branch05

commit description：a1.74（example02-1——解决axios接收数据出现跨域的问题）

tag：a1.74

4.3.2 example02-2

这种配置也不太好，因为你会为每个请求都需要配置，我们可为其加一个前缀，请求某个地址再去转发。

url:'/api/items' => 加一个特殊的前缀，防止路由的时候发生冲突。

\app\src\views\Home.vue

        async created() {
            let rs= await axios({
                url:'/api/items'
            });
 
            this.items = rs.data;
 
            console.log(this.items);
        }

\app\vue.config.js

 
module.exports = {
 
    devServer: {
        proxy: {
            '/api': {
                target: 'http://localhost:7777',
                pathRewrite: {
                    '^/api': ''
                }
            }
        }
    }
 
};

这样的好处还有，假若有多个服务端的话，在多个服务端有多个接口的同时，可进行/api1/xx、/api2/xx等等转发多个。

参考：https://https://github.com/6xiaoDi/blog-vue-Novice/tree/a1.75
Branch： branch05

commit description：a1.75（example02-2——解决axios接收数据出现跨域的问题2）

tag：a1.75

（后续待补充）