Axios 封装

1.安装axios

• npm install axios --save.
• npm install qs --save.

2.创建http.js

import axios from "axios";
import QS from "qs";
import Store from "@/store/index";

// 请求超时时间
axios.defaults.timeout = 10000;

// post请求头
axios.defaults.headers.post["Content-Type"] = "application/x-www-form-urlencoded;charset=UTF-8";

//请求拦截
axios.interceptors.request.use(
  config => {
    Store.dispatch("isLoadingAsyn", !Store.state.isLoading);
    if (store.state.token) {  // 判断是否存在token，如果存在的话，则每个http header都加上token
        config.headers.Authorization = `token ${store.state.token}`;
    }
    return config;
  },
  error => {
    return Promise.error(error);
  });

// 响应拦截器
axios.interceptors.response.use(
  response => {
    Store.dispatch("isLoadingAsyn", !Store.state.isLoading);
    // 如果返回的状态码为200，说明接口请求成功，可以正常拿到数据     
    // 否则的话抛出错误
    if (response.status === 200) {
      return Promise.resolve(response);
    } else {
      return Promise.reject(response);
    }
  },
  // 服务器状态码不是2开头的的情况
  // 这里可以跟你们的后台开发人员协商好统一的错误状态码    
  // 然后根据返回的状态码进行一些操作，例如登录过期提示，错误提示等等
  // 下面列举几个常见的操作，其他需求可自行扩展
  error => {
    Store.dispatch("isLoadingAsyn", !Store.state.isLoading);
    if (error.response.status) {
      switch (error.response.status) {
        // 401: 未登录
        // 未登录则跳转登录页面，并携带当前页面的路径
        // 在登录成功后返回当前页面，这一步需要在登录页操作。                
        case 401:

          break;

          // 403 token过期
          // 登录过期对用户进行提示
          // 清除本地token和清空vuex中token对象
          // 跳转登录页面                
        case 403:

          break;

          // 404请求不存在
        case 404:
          console.log(404);
          break;
          // 其他错误，直接抛出错误提示
        default:
          //
      }
      return Promise.reject(error.response);
    }
  });

/** 
 * get方法，对应get请求 
 * @param {String} url [请求的url地址] 
 * @param {Object} params [请求时携带的参数] 
 */
export function get(url, params){
  return new Promise((resolve, reject) => {
    axios.get(url, {
      params: params
    })
    .then(res => {
      console.log(res)
      resolve(res.data);
    })
    .catch(err => {            
      reject(err.data)        
    });
  });
}


/** 
 * post方法，对应post请求 
 * @param {String} url [请求的url地址] 
 * @param {Object} params [请求时携带的参数] 
 */
export function post(url, params) {    
  return new Promise((resolve, reject) => {         
      axios.post(url, QS.stringify(params))        
      .then(res => {            
          resolve(res.data);        
      })        
      .catch(err => {            
          reject(err.data)        
      })    
  });
}

/** 
 * upload方法，对应post请求 
 * @param {String} url [请求的url地址] 
 * @param {Object} params [请求时携带的参数] 
 */
export function upload(url, params, callback1) {    
  return new Promise((resolve, reject) => {         
    axios({
      url: url,
      method:'post',
      onUploadProgress:function(progressEvent){ //原生获取上传进度的事件
          if(progressEvent.lengthComputable){
              //属性lengthComputable主要表明总共需要完成的工作量和已经完成的工作是否可以被测量
              //如果lengthComputable为false，就获取不到progressEvent.total和progressEvent.loaded
              callback1(progressEvent);
          }
      },
      data:params
    })       
      .then(res => {            
          resolve(res.data);        
      })        
      .catch(err => {            
          reject(err.data)        
      })    
  });
}

3.创建getData.js

import { get, post, upload } from "./http";
import appUrl from "./url";

/* 获取题库列表 */
export const getCourseList = (vm, cb) => {
  let p = {
    t: "22"
  }
  get(appUrl.getCourseList, p)
    .then((res) => {
      console.log(res);
      if(res.errcode == 0) {
        let data = res.result || [],
            len = data.length,
            ownList = [];
        for (let i = 0; i < len; i++) {
          let item = {};
          item.name = data[i].name;
          item.id = data[i].id;
          item.status = data[i].status;
          item.created_time = vm.$publicFn.fnTime(data[i].created_time);
          ownList.push(item);
        }
        vm.list = ownList;
      }
    })
    .catch((err) => {
      console.log(err);
    })
}