對axios請求做封裝

1. 設置一些基礎信息，如baseURL等

   base.js文件

   export const baseURL = 'https://www.example.com'
   

2. 對axios做封裝，設置攔截器

   service.js文件

   import { baseURL } from '../config'
   import axios from 'axios'
   import QS from "qs"
   
   /**
    * 創建axios實例 
    */
   const service = axios.create({
       baseURL: baseURL,
       timeout: 5000,  // 請求超時時間
       headers: {
           // 默認格式，當沒有在信息頭指定Content-Type的時候，默認使用這種格式傳參 key1=value1
           'Content-Type': 'application/x-www-form-urlencoded;charset=UTF-8'
       }
   });
   
   /**
    * request攔截器
    */
   service.interceptors.request.use(config => {
       // 注意：post請求參數放在data裏面，get請求參數放在params裏。
       config.method === 'post' ? config.data = QS.stringify({...config.data}) : config.params = {...config.params};
       // 這裏可以根據項目需求做一部分相應的設置，如在請求頭中添加一個字段
       // config.headers['xxx'] = 'xxx'
       return config;
   }, error => {  // 請求錯誤處理
       Promise.reject(error)
   });
   
   
   /**
    * respone攔截器
    */
   service.interceptors.response.use(
       response => {  
           // 獲取到服務器返回的信息
           let message = response.data.msg
   
           //這裏根據後端提供的數據進行對應的處理
           if(response.data.code == 1) {
               //請求成功，展示相應的提示信息 如 alert(message)
               return response.data;  // 注意不要忘記返回響應信息
           }
       },
       error => {  // 響應錯誤處理
           switch(error.response.data.code) { // 根據後臺返回的狀態碼做相應的處理
               case 0:
                   // alert('獲取數據失敗')
                   break;
               case 2:
              		 // alert（'當前用戶token過期'）
                    // 清除token  localStorage.removeItem('token');       
                   // 跳轉登錄頁面  
                   break;
               case 3:
                   alert('失效類數據--例如:獲取某條消息詳情')
                   break;
               case 4:
                   // 其他錯誤，直接拋出錯誤提示
                   break;
           }
           return Promise.reject(error)
       }
   );
   export default service;  // 將service暴露出去
   

3. 封裝get和post方法

   fetch.js文件

   import service from './service'
   import QS from "qs"
   
   /**
    * get方法，對應get請求
    * @param {String} url [請求的url地址]
    * @param {Object} params [請求時攜帶的參數]
    */
   export function get(url, params){    
       return new Promise((resolve, reject) =>{ 
           service.get(url, {            
               params: params        
           }).then(res => {
               resolve(res);
           }).catch(error =>{
               //超時之後在這裏捕抓錯誤信息.
               if (error.response) {
                   console.log('error.response:', error.response);
               } else if (error.request) {
                   console.log('error.request:', error.request)
                   // if(error.request.readyState == 4 && error.request.status == 0){
                   //  在這裏重新請求
                   //  }
               } else {
                   console.log('Error', error.message);
               }
               console.log(error)
               reject(error.data)        
           })    
       });
   }
   
   /** 
    * post方法，對應post請求 
    * @param {String} url [請求的url地址] 
    * @param {Object} params [請求時攜帶的參數] 
    */
   export function post(url, params) {
       return new Promise((resolve, reject) => {
           service.post(url, QS.stringify(params))
           .then(res => {
               resolve(res.data);
           })
           .catch(err =>{
               reject(err.data)
           })
       });
   }
   

4. 包含n個接口請求函數的模塊，函數的返回值:promise對象

   api.js文件

   import { get } from './fetch'
   
   export const reqExamList = (params) =>{ 
       return get(`/score/examinfo`, params)
   }
   

5. 發送請求

   import { reqExamList } from './axios/api'
   async getExamList(params) {
      const result = await reqExamList(params)
      console.log(result)
    }