vue-router

异步请求

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

axios

npm i axios

请求

home.vue
<template>
  <div class="name">
      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>

跨域

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

vue.config.js

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

跨域请求代理配置

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