突然发现这个坑一下子就已经一个月了……赶紧更新一下以表示我还没忘记。、

新手在使用Vue的时候可能会有这么一个疑惑，那就是在Vue里要如何使用ajax去请求后端。毕竟使用jQuery的时候直接就能用方便的$.ajax()方法。

然而Vue里是没有实现ajax的，所以要么自己去实现一个，要么去使用第三方实现，而Vue官方推荐的便是axios。

Vue中使用axios

axios是一个基于promise的HTTP库，项目地址是https://github.com/axios/axios。

要在Vue中集成axios，首先我们进入Vue项目的根目录，使用npm安装：

npm install --save axios

然后，在main.js中就可以引入axios，并将其添加到Vue的原型属性中：

// main.js
import Axios from 'axios'
Vue.prototype.$axios = Axios;

然后就可以在项目中使用axios访问后端接口了！

详细的使用方式可以参考这个文档：https://www.kancloud.cn/yunye/axios/234845

这里只举几个示例代码：

// get方式
this.$axios.get('/story/getStory', {
          params: {
            storyId: this.storyId
          }
        })
          .then(response => {
            // do something
            })
          .catch(error => {
            // do something
          });
 
// post方式
this.$axios.post('/user/login',{
            username: this.username,
            password: this.password,
            captcha: this.captcha
          })
            .then(response => {
              // do something
            })
            .catch(error => {
              // do something
            })

开发环境下临时解决跨域问题

在开发的时候很可能我们的服务端程序和客户端程序不是用同一个web容器运行的，这样就会出现跨域问题，如果实际上线时并不会分开部署前后端，那么可以用下面的方法在开发环境下临时解决跨域问题。

1.修改vue.config.js文件的配置

// vue.config.js
module.exports = {
    lintOnSave: false,
    devServer: {
        port: 8181,
        proxy: {
            '/api': {
                target: 'http://localhost:8080',
                changeOrigin: true,
                pathRewrite: {
                    '^/api': '/'
                }
            }
        }
    }
}

主要关注的是devServer配置项下的proxy一项，这里的配置意为将所有/api的地址代理到http://localhost:8080，这个target地址就填写服务端的对应地址。

这样，运行Vue-Cli测试时，访问http://localhost:8181/api/user/login就相当于访问http://localhost:8080/user/login。

2.修改axios的配置

之前我们并没有修改axios的默认配置，现在创建一个http.js用于管理axios的配置：

// http.js
import axios from "axios";
 
// 此处可添加axios配置
axios.defaults.baseURL = '/api';
 
export default axios;

这样我们用axios访问后端时就不需要一个个加上/api，并且部署测试的时候也可以直接修改这里的baseURL的值即可。

然后main.js就改为从http.js中获得axios对象。

// main.js
import axios from "./http";
Vue.prototype.$axios = axios;
 
// ...
 
new Vue({
  router,
  store,
  axios,
  render: h => h(App)
}).$mount("#app");

这样配置完毕之后，在开发环境下应该就没有跨域问题了。

至于想要在前后端分开部署的情况下解决跨域问题，就不在这篇文章的讨论范围内。（明目张胆的坑掉233）

尾巴

axios还有很多可以配置的东西，不过我现在都还没用到233，总的来说习惯之后用axios来做请求还是写的很舒服的~