axios封装以及配置拦截器

1、安装：

1.npm安装：

npm install axios

2.在主入口文件main.js中引用：

import axios from 'axios'
Vue.use(axios);

2、新建request.js文件

import axios from 'axios'
const baseURL = "";
// 创建axios实例
const service = axios.create({
  baseURL: baseURL, // 配置基础路径
  timeout: 26000, // 请求超时时间
})

// 请求拦截器
service.interceptors.request.use(
  (config) => {
    if (Cookies.get('token')) {
      config.headers.Authorization = Cookies.get('token')
    }
    return config;
  }, (error) => {
    return Promise.reject(error);
  }
);

// 响应拦截器
axios.interceptors.response.use(res => {
  // 成功响应的拦截
  return Promise.resolve(res.data)
}, err =>{
  // 失败响应的拦截
  if(err.response){
    switch(err.response.status){
      // 处理状态码，根据后端约定匹配
      case 401:
        window.location.href='/login'
        break
      case 404:
        window.location.href='/404'
        break
      case 405:
        break
      // case ...
      default:
        console.log('其他错误')
        break
    }
  }
  // 因为如果直接return err则在调用此实例时，响应失败了也会进入then(res=>{})而不是reject或catch方法
  return Promise.reject(err)
})

3、封装请求接口

// 封装请求
const http = {
  /** get 请求
   * @param  {接口地址} url
   * @param  {请求数据} params
   */
  get(url, params?) {
    return new Promise((resolve, reject) => {
      service({
        url: url,
        method: 'get',
        params
      }).then(res => {
        if(res) resolve(res.data);
      })
      .catch(err => {
        reject(err);
      })
    });
  },
  /** post 请求
   * @param  {接口地址} url
   * @param  {请求数据} data
   */
  post(url, data?) {
    return new Promise((resolve, reject) => {
      service({
        url: url,
        method: 'post',
        data,
      }).then(res => {
        if(res) resolve(res.data);
      })
      .catch(err => {
        reject(err);
      })
    });
  },
  /** delete 请求
   * @param  {接口地址} url
   * @param  {请求数据} data
   */
  delete(url, data) {
    return new Promise((resolve, reject) => {
      service({
        url: url,
        method: 'delete',
        data,
      }).then(res => {
        if(res) resolve(res.data);
      })
      .catch(err => {
        reject(err);
      })
    });
  },

  /** put 请求
   * @param  {接口地址} url
   * @param  {请求数据} data
   */
  put(url, data) {
    return new Promise((resolve, reject) => {
      service
        .put(url, data)
        .then((response) => {
          if (response) resolve(response.data);
        })
        .catch((error) => {
          reject(error);
        });
    });
  },
};

4、使用接口

创建api.js文件

import http from './request.js'
// 登录
export const userLogin = (data) => http.post('/api/user/login', data)
// 注册
export const userRegister = (data) => http.post('/api/user/register', data)
// 获取个人信息
export const getInfo = () => http.get('/api/user/info')
// 获取分页列表
export const getList = (data) => http.get('/api/page/list', data)