axios和api的封装，请求后台接口数据管理

axios和api的封装管理(前后端分离，请求后台接口数据管理)——好用易记！

1. axios封装
   在使用vue框架项目中，和后台交互获取数据的时候，我们通常使用的是axios库，它是基于promise的http库，可运行在浏览器端和node.js中。例如拦截请求和响应、取消请求、转换json、客户端防御XSRF等等。直接推荐我们使用axios库。

安装

1.npm install axios --save;//在开发环境中安装axios库

引入
一般在项目的src根目录下新建一个api文件夹，然后在api文件夹里面新建一个http.js文件和一个api.js文件。http.js文件用来封装axios的promise请求函数，api.js用来统一管理我们的接口封装函数(例如get、post、put、delete等)。

// 在http.js中引入axios
import axios from 'axios'; // 引入axios库

封装get方法和post方法

一般ajax请求方法有get、post、put、delete等方法，但是最常用的还是其中的get和post方法。
get方法：我们通过定义一个get函数，get函数有两个参数，第一个参数表示我们要请求的url地址，第二个参数是我们要携带的请求参数。get函数返回一个promise对象，当axios其请求成功时resolve服务器返回值，请求失败时reject错误值。最后通过export抛出get函数。

export function get(url, params){    
    return new Promise((resolve, reject) =>{        
        axios.get(url, {            
            params: params        
        }).then(res => {
            resolve(res.data);
        }).catch(err =>{
            reject(err.data)        
    })    
});

post方法：原理同get基本一样，但是要注意的是，post方法必须要使用对提交从参数对象进行序列化的操作。

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

2. api.js的统一管理
   首先我们在api.js中引入我们封装的get和post方法

import { get, post } from './http.js'

如果有这样一个接口，是一个post请求:http://www.jd.com/users/usersinfo

我们可以在api.js中这样封装：

export const usersInfo= p => post('users/usersinfo', p);

然后在我们的页面中可以这样调用我们的api接口:

import { usersInfo} from '@/request/api';//导入我们写好的api接口
export default {        
    name: 'usersInfo',  
    created () {
        this.onLoad();
    },
    methods: {            
        // 获取数据            
        onLoad() {
            // 调用api接口，并且提供了两个参数                
            usersInfo({                    
                type: 0,                    
                sort: 1                
            }).then(res => {
                // 成功获取接口数据的其他自定义操作             
            })            
        }        
    }
}

总结：其他的api接口也是类似的写法，需要用到什么接口就在api.js里面扩展就好。api接口管理就是把api统一集中起来，提高代码的可维护性和减少修改代码出错率。