开发环境配置

一般在构建应用时需要访问后端的 API 接口获取后端数据并展示。

做这件事的方法有很多种（比如 axios，vue-resource，fetch-jsonp），使用 promise 的 HTTP 客户端 axios 是其中非常流行的一种方式。

axios 也支持 RESTful 请求调用规范。

axios介绍

axios 是一个易用、简洁且高效的 HTTP 库。

axios 主要是用于向后台发起请求，或者在请求中做更多可控的功能（比如拦截请求，请求伪造等）

axios 特点

1. 从浏览器中创建 XMLHttpRequests
2. 从 node.js 创建 http 请求
3. 支持 Promise API
4. 拦截请求和响应
5. 转换请求数据和响应数据
6. 取消请求
7. 自动转换 JSON 数据
8. 客户端支持防御 XSRF

安装axios插件

axios 是一个第三方插件，所以使用之前要先安装.

npm install --save axios

axios实现RESTful请求规范(代码示例)

1. api统一管理: src/restful/api.js

import axios from 'axios'

//var base_url = window.location.protocol + '//' + window.location.hostname + ':' + '8000';
var base_url = "https://www.postman-echo.com"  // 指定后端域名与端口
axios.defaults.baseURL = base_url;

export const login = (params,) => {
    return axios.post('/post', params).then(res => res)
};

2. 将api加载到vue实例全局配置中: src/main.js

// 导入api接口
import * as api from './restful/api'
// 全局配置, 配置后，页面中可以直接通过this.$api 来使用api
app.config.globalProperties.$api = api;

3. 在组件中触发api请求: src/components/Show.vue

<template>
  <div>
    <div>
      Show 组件
    </div>
    <h2>通过axios与后端数据交互</h2>
      用户名：<input v-model="username">
      密码：<input v-model="password">
      <button @click="to_login">提交发送axios请求</button>
    <div>
      <span style="font-weight:bold">显示后端响应内容：</span>
      {{ resp }}
    </div>
    <hr>
  </div>
</template>

<script>
export default {
  name: "Show",
  data() {
    return {
      username: "",
      password: "",
      resp: ""
    }
  },
  methods: {
    to_login() {
      let post_data = {
        username: this.username,
        password: this.password
      }
      console.log(post_data)
      this.$api.login(post_data).then(res => {
        this.resp = res.data
        console.log(res)
      })
    }
  }
}
</script>

<style scoped>

</style>

测试axios

上面该例子可见，已经成功发起http请求，但是遇到了前端与后端不在同一个域名中，导致了跨域问题。

解决axios跨域

1. 编辑项目根目录中的vue.config.js,添加代理设置

module.exports = {
    runtimeCompiler: true,

    devServer: {
        // port: 80, // 前端端口
        proxy: {  // 设置代理，解决跨越问题
            //名字可以自定义，这里我用的是api
            '/api': {
                target: 'https://www.postman-echo.com',//设置你调用的接口域名和端口号 别忘了加http
                changeOrigin: true,//这里设置是否跨域
                ws: true,
                pathRewrite: {
                    '^/api': ''
                }
            }
        }

    }
}

2. 修改src/restful/api.js 中的 base_url

var base_url = "api"
axios.defaults.baseURL = base_url;

3. 重启vue项目，即可

---

转载请注明来源，欢迎对文章中的引用来源进行考证，欢迎指出任何有错误或不够清晰的表达。