Vue（路由）2.异步请求

vue-router

异步请求

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

axios

npm i axios

请求

// 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>

异步：async和await

跨域

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

vue.config.js

跨域请求代理配置

利用webpack的devServer
请求前加一个/api以区分请求组件等内容，但是后端的接口是没有/api的，所以写pathRewriter类似正则将请求中的/api替换为空

// vue.config.js
module.exports = {
  devServer: {
    proxy: {
      '/api': {//请求前要加一个/api以便区分
        target: 'http://localhost:7777',
        pathRewrite: {
          '^/api': ''
        }
      }
    }
  }
}

请求前要加一个/api以便区分

// home.vue
<script>
...
created() {
  axios({
  	url: '/api/items'    //请求前要加一个/api以便区分
  }).then(res => {
  	this.items = res.data;
	});
}
...
</script>