Vue：添加axios（接口与使用分离）

近期在使用vue的时候，在为其添加axios这块，看了很多文章，大部分都是将接口的定义与使用放在一起的。个人认为这种写法对接口的管理极为不便。所以稍微整理了一种接口与使用分离的写法，与大家分享，如有更好的方式，欢迎评论指正。

1、安装axios

切换到项目根目录，安装axios

npm inatsll axios --save-dev

2、新建文件夹axios，在该文件夹下新建Api.js用于统一管理项目所需的接口。（此处以登录为例）

import axios from 'axios'

//定义登录接口
export const login = (content) => axios({
  method: 'post',
  url: '/Login',
  data: content
})
  .then(function (response) {
    return response.data;
  })
  .catch(function (error) {
    console.log(error);
  });

3、在登录的vue文件中使用axios

import {login} from '../axios/Api';
......

login([this.username,this.password]).then(res => {
    console.log(res);
  if(res == 1){
    this.$router.push('/Home');
  }else{
    this.$message.error(res);
  }
})

......

该种使用方法将接口的定义与使用进行了分离。以后项目若是新增了接口，可直接在Api.js中进行维护。

欢迎关注公众号“洁儿的漫漫求学路”，互相学习，共同进步~