vue-cli中axios接口的封装和api接口的管理

一般我们会新建2个文件，request.js用于封装axios，api用来统一管理我们的接口

request.js（封装axios）

安装
npm install axios; // 安装axios
引入
import axios from 'axios';
环境的切换

var API_PREFIX = '';
if (process.env.NODE_ENV == 'development') {
    API_PREFIX = '';
}else{
    var idx = location.href.indexOf("/site");
    API_PREFIX = location.href.substr(0,idx)
}
//如果接口地址不是http开头的
if(options.url.indexOf('http') == -1){
        options.url = API_PREFIX + options.url;
    }

options.method = options.method?options.method:'get';

定义heders

• 如果存在，则统一在http请求的header都加上token，这样后台根据token判断你的登录情况
• 即使本地存在token，也有可能token是过期的，所以在响应拦截器中要对返回状态进行判断

   var hearders = {
        'Content-Type': 'application/json'
    };
    if(TOKEN) {
        var hearders = {
            'Content-Type': 'application/json',
            'token': TOKEN,
        };
     }

创建axios实例
axios.create([config])

const instance = axios.create({
            headers: hearders,
            timeout:options.timeout === undefined?5000:options.timeout
        });

封装get方法和post方法

export default function(options) {
  return new Promise((resolve, reject) => {
        const instance = axios.create({
            headers: hearders,
            timeout: options.timeout === undefined?5000:options.timeout
        });
        instance(options)
            .then(response => { 
                //请求成功后 更新前端token的有效时间
                updateTokenExpire();
                resolve(response.data); 
            })
            .catch(error => {   
                if (error.response) {
                    //api 登录重试
                    switch (error.response.data.status_code){
                        case 401:
                            if (process.env.NODE_ENV == 'development') {
                                store.commit('set_toast_msg','dev token 失效');
                            }else{
                                //需要登录
                                //清除当前token 信息
                                clearToken(store.state.token.account_id);
                                goLogin();
                            }
                            reject({status_code:401,message:''});
                            return ;
                            break;
                        default:
                            break;
                    }   
                }
                reject(error.response?error.response.data:error);
                

            });
    });
}

api的统一管理

• 首先我们创建一个api文件夹来管理接口
• 在api文件夹里面新建一个index.js文件，所有的关于首页的接口都房子这个里面
• 然后我们引入request.js import request from '@/utils/request'
• 向外暴露接口方法
  -- get方法

export default {
    home:function(){
        return request({
            url:'/api/site/home',
            method:'get',
        });
    },
}

-- post 方法

export default {
    getWxsdk:function(account_id,url){
        return request({
            url:'/api/system/jssdk',
            method:'post',
            data:{
                url:url,
                mid:account_id
            }
        });
    },
}

在页面中如何调用

• 引入接口 import api from '../api/index.js'
• 调取接口方法

api.home().then(function(res){
  console.log('success');
}).catch(function(err){
  console.log('error');         
})