Vue中Axios的封装 Api接口管理

1、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须要再封装