项目中axios的封装

新建base.js

import axios from "axios";
import "../../store/index";
import router from "../../router/index";

// axios 配置

// 设置请求超时
// axios.defaults.timeout = 60 * 1000;
axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded';

const http = axios.create({
    baseURL: 'https://www.baidu.com'
  });

// 请求拦截器
http.interceptors.request.use(
  config => {
    if (localStorage.token) {
      // 判断是否存在token，如果存在的话，则每个http header都加上token
      config.headers.Authorization = `Bearer ${localStorage.token}`;
    }else{
      // router.push('/login')
    }
    return config;
  },
  err => {
    return Promise.reject(err);
  }
);

// 响应拦截器
http.interceptors.response.use(
  response => {
    if (response.status === 200) {
      return Promise.resolve(response);
    } else {
      return Promise.reject(response);
    }
  },
  error => {
    if (error.response) {
      console.log(error.response)

      switch (error.response.status) {
        case 401:
          //清除token
          store.commit("LOGOUT");
          router.replace({
            path: 'login',
            query: {redirect: router.currentRoute.fullPath}
        })
          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) => {
    http.get(url, {
        params: params
      })
      .then(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) => {
    http.post(url, params)
      .then(res => {
        resolve(res.data);
      })
      .catch(err => {
        reject(err.data)
      })
  });
}

// 说明总结：
// axios 中通过 data 选项设置 Body 请求体参数
data: {
  pass:123,
  code:''
}
// axios 中通过 params 选项设置 Query 参数
// Query也叫查询参数
params: {
 status:2
}
// 请求路径中的 :xxx 表示路径参数
// 使用时 把这个 :xxx 替换为指定的值
url:'/user/v1/comment/:xxx'

请求参数;
1 请求头 Headers
2 查询参数 Query
3 请求体 Body
4 路径参数

export default axios;