对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)
    }