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

  }

  ...

}