vue项目api接口管理以及axios方法封装

在vue开发中，会涉及到很多接口的处理，当项目足够大时，就需要定义规范统一的接口，如何定义呢？

方法可能不只一种，本文使用axios+async/await进行接口的统一管理。

本文使用vue-cli生成的项目举例。

举个例子，就拿csdn来讲，分为首页、博客、学院、下载、论坛、商城、招聘等等。

一般来说，网站的首页都是复杂的，会用到很多其他页面也会用到api，所以接口统一管理可以做到api的复用。

那么如何做呢？

首先，在src目录下新建一个文件夹，我这里叫apis，后台提供的所有接口都在这里定义：

第二步，按照后台文档划分的模块新建js文件,这里简单举个例子：

src

 apis

   blog.js

   college.js

   download.js

   ........

第三步，需要引入axios做相应的配置。

在apis下新建一个文件夹，叫http.js，在里面做axios相应的配置。

配置如下:

import axios from 'axios'

//创建axios的一个实例 
var instance = axios.create({
    baseURL: xxx,
    timeout: 6000
})


//------------------- 一、请求拦截器 忽略
instance.interceptors.request.use(function (config) {
    if (config.url == '...') {
        config.headers = {
            'Content-Type': 'application/json'
        };
    } else {
        let token = '123456'
        if (token) {
            config.headers = {
                'Authorization': 'Bearer ' + token,
                'Content-Type': 'application/json'
            };
        }
    }
    config.url = config.url + '?random=' + new Date().getTime()
    return config;   
}, function (error) {
    // 对请求错误做些什么
    return Promise.reject(error);
});

//----------------- 二、响应拦截器 忽略
instance.interceptors.response.use(function (response) {
    if(response.status==200){
        return response.data;
    }else{
        //...
    }    
}, function (error) {
    // 对响应错误做点什么
    return Promise.reject(error);
});


export default function (method, url, data = null) {
    method = method.toLowerCase();
    if (method == 'post') {
        return instance.post(url, data)
    } else if (method == 'get') {
        return instance.get(url, { params: data })
    } else if (method == 'delete') {
        return instance.delete(url, { params: data })
    } else if (method == 'put') {
        return instance.put(url, data)
    } else {
        console.error('未知的method' + method)
        return false
    }
}

 配置简要说明一下：

• 引入axios，新建了个axios的实例（axios的实例的axios的功能一样）。

• 请求拦截器响应拦截器不是本文重点，略过。

• 第30行代码及以后是重点，拉出来重点看一下。

/**
* 使用es6的export default导出了一个函数，导出的函数代替axios去帮我们请求数据，
* 函数的参数及返回值如下：
* @param {String} method  请求的方法：get、post、delete、put
* @param {String} url     请求的url:
* @param {Object} data    请求的参数
* @returns {Promise}     返回一个promise对象，其实就相当于axios请求数据的返回值
*/
export default function (method, url, data = null) {
   method = method.toLowerCase();
   if (method == 'post') {
       return instance.post(url, data)
   } else if (method == 'get') {
       return instance.get(url, { params: data })
   } else if (method == 'delete') {
       return instance.delete(url, { params: data })
   }else if(method == 'put'){
       return instance.put(url,data)
   }else{
       console.error('未知的method'+method)
       return false
   }
}

第四步，在apis下面的js文件中引入 http.js导出的函数，拿其中一个文件 blog.js说明：

/blog.js 用于定义用户的文章，评论等

import req from './http.js'

//定义接口  

//在这里定义了一个文章的接口，把文章的接口暴露出去给组件使用
export const ARTICLE=params=>req('post','/api/blog/article',params)
//这里使用了箭头函数，转换一下写法：
//export const ARTICLE=function(req){
//    return req('post','/api/blog/article',params)
//}

//定义评论接口
export const COMMENT=params=>req('post','api/blog/comment',params)

第五步，在组件中使用接口。

//Blog.vue

这样定义接口虽然看起来麻烦点，但有以下几个好处：

• 代码看起来规范，所有的接口都在一个文件夹定义，不用分散的各个组件，维护起来简单，例如后台的一些url变了，改起来也方便。

• 可以做到接口一次定义，到处使用。