Vue学习记录-接口通信（数据请求）

这一篇，把前两天实践的“数据请求”部分总结一下。从最终的结果来看，配置非常的简单，使用非常的简单，也非常的灵活，同时也存在一个很头疼的问题，这个问题可以解决，但是解释不了（功力尚浅）。

选型

可选项：vue-resource、axios

看官方文档的时候，发现了一个数据请求的组件库，叫vue-resource（https://github.com/pagekit/vue-resource），根据说明，也做了集成，马上就要测试的时候，发现了一句话（具体地方已经忘记了），说“原来的vue-resource因为xxxxxxx，推荐使用axios”。所以呢，没等用上vue-resource，直接换成了axios。

 

使用axios

1. 安装

npm i axios --save

2. 添加工具类utils/api.js

import axios from 'axios'
import qs from 'qs'

// axios 配置
axios.defaults.timeout = 5000;
axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded;charset=UTF-8';


//POST传参序列化
// axios.interceptors.request.use((config) => {
//   if (config.method === 'post') {
//     config.data = qs.stringify(config.data);
//   }
//   return config;
// }, (error) => {
//   // _.toast("错误的传参", 'fail');
//   return Promise.reject(error);
// });

//返回状态判断
// axios.interceptors.response.use((res) => {
//   if (!res.data.success) {
//     // _.toast(res.data.msg);
//     return Promise.reject(res);
//   }
//   return res;
// }, (error) => {
//   // _.toast("网络异常", 'fail');
//   return Promise.reject(error);
// });

export function fetch(url, params) {
  return new Promise((resolve, reject) => {
    axios.post(url, params)
      .then(response => {
        resolve(response.data);
      }, err => {
        reject(err);
      })
      .catch((error) => {
        reject(error)
      })
  })
}

export default {
  POST(url, params) {
    return fetch(url, params = {});
  }
}

3. 具体使用

比如在登录页面，点击登录以后，调取验证接口，步骤如下

1）引入api.js，比如

import api from '../utils/api';

2）调用接口函数，传递参数

api.POST('api/account/login', {username:this.username, password:this.password}).then(data=> {
　　// 其他处理
});

<template>
  <div id="container">
    ...
    <div id="main">
      <div id="login">
        <div class="form-input">
          <span>
            <i class="icon input-icon">&#xe601;</i>
          </span>
          <input class="login-form-input" placeholder="请输入用户名" v-model="username"/>
        </div>

        <div class="form-input form-input-password">
          <span>
            <i class="icon input-icon">&#xe601;</i>
          </span>
          <input class="login-form-input" placeholder="请输入密码" type="password" v-model="password"/>
        </div>
        <div id="login-button">
          <Button type="primary" size="large" @click.native="onPressLogin">登 录</Button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  ...
  import api from '../utils/api';

  export default {
    ...
    data: function () {
      return {
        username: null,
        password: null,
        remember_password: false,
      }
    },
    methods: {
      // 登录
      onPressLogin: function () {
        let param = {
          username: this.username,
          password: this.password,
        }
        api.POST('api/home', param).then(data=> {
          // 其他处理
        });
      }
    }
  }
</script>

<style>
  ...
</style>

最后说说跨域的问题吧

关于跨域访问，我的基础知识还不够，所以解释不了。解决方案写明白，至少能解决问题

修改/ProjectPath/config/index.js

module.exports = {
  dev: {
    // Paths
    assetsSubDirectory: 'static',
    assetsPublicPath: '/',
    proxyTable: {
      '/api': {
        target: 'http://xx.xx.xx.xxx:xxx/api/', //设置成要调用的接口域名和端口号
        changeOrigin: true,
        pathRewrite: {
          '^/api': '/' //这里的名称就是一个代理名称，叫什么都可以，具体通过API调用的时候，会将这个名字进行替换，
　　　　　　　　　　　　　 //比如，真正的接口地址是http://1.2.3.4:8/mobile/login
　　　　　　　　　　　　　 //     target就配置成http://1.2.3.4:8/mobile
　　　　　　　　　　　　　 //     具体调用的时候，就写成/api/login
　　　　　　　　　　　　　 //     会将api替换成target，即最终调用地址http://1.2.3.4:8/mobile/login
        }
      }
    },

    // Various Dev Server settings
    host: 'localhost', // can be overwritten by process.env.HOST
    port: 8080, // can be overwritten by process.env.PORT, if port is in use, a free one will be determined
  }
 
  ...
}

 

计划里还有最后一个篇章，关于“状态管理”的，比如“根据登录状态进行判断，显示登录页或者菜单页面”，那就，预知后事如何，待我娓娓道来