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須要再封裝