Vue中Axios的封装 Api接口管理

一、Axios的封装

Axios库是基于promise的http库，可运行到浏览器端和nodejs中，他有很多优秀的特性，例如拦截请求和响应、取消请求、扁平化json数据、<客户端防御XSRF等。如果还对axios不了解，可以移步axios文档。

引入

在src中新建文件夹config里面放统一配置文件新建http.js作为Axios封装文件。

//在http.js中引入axios
import axios from 'axios';// 引入axios
import {Spin} from 'iview';//引入ui组件
import qs from 'qs'// 引入qs模块，用来序列化post类型的数据
import util from './util'//引入公用方法组件

创建axios实例

// 创建axios实例
var instance = axios.create({timeout: 1000 * 12});
//设置post请求头
instance.defaults.headers.post['Content-Type']='application/x-www-form-urlencoded;charset=UTF-8';

配置统一方法

const toLogin = () => {
    router.replace({
        path: '/login',        
        query: {
            redirect: router.currentRoute.fullPath
        }
    });
}

请求拦截器

/** 
 * 请求拦截器 
 * 每次请求前，如果存在token则在请求头中携带token 
 */ 
 //引入vuex 这里token是存在vuex中的
 import store from '@/store/index';
 
 instance.interceptors.request.use(
  config =>{
    //每次发送请求判断vuex中是否存在token
    //如果存在，则统一在http请求header上加上token,之后根据token判断登陆状态
    //即使本地存储的token也可能是过期的，在响应拦截器中要对返回状态进行判断
    const token=stroe.state.tocken;
    token && (config.headers.Authorization = token);
    return config;
  },
    error => {
    return Promise.error(error);
    }
  )

响应拦截器

instance.interceptors.response.use(
    response => {
      if(response.status===200){
        return Promise.resolve(response);
      }else{
        return Promise.reject(response);
      }
    },
    // 服务器状态码不是2开头的的情况
    // 这里可以跟你们的后台开发人员协商好统一的错误状态码
    // 然后根据返回的状态码进行一些操作，例如登录过期提示，错误提示等等
    // 下面列举几个常见的操作，其他需求可自行扩展
    error => {
      if(error && error.response){
        switch(error.response.status){
          case 401:
            toLogin();
            break;
          case 403:
            //token过期需要清除cookie跳转路由
            //需要自己ui的弹窗提示下登陆过期
            toLogin();
            break;
          case 404:

            break;
          case 500:
            break;
          default:
            break;
        }
        return Promise.reject(error.response);
      }else{
        //断网处理
        // 处理断网的情况
        // eg:请求超时或断网时，更新state的network状态
        // network状态在app.vue中控制着一个全局的断网提示组件的显示隐藏
        // 关于断网组件中的刷新重新获取数据，会在断网组件中说明
        //store.commit('changeNetwork', false);
      }
    }
  )

环境配置config.js

新建环境配置config.js

const base = {    
    sq: 'https://xxxx111111.com/api/v1',    
    bd: 'http://xxxxx22222.com/api'
}
export default base;

下面进行api的封装

api可以按模块进行封装

/**
 * api模块接口列表
 */

import base from './base'; // 导入接口域名列表
import axios from '@/config/http'; // 导入http中创建的axios实例
import qs from 'qs'; // 根据需求是否导入qs模块
const api = { 
    // 新闻列表    
    loginapi () {        
   return axios.get(`${base.sq}/apis`);    
    }
    // 其他接口…………
}
export default article;

如果用到了mock.js需要再封装