axios 调用接口方法

Axios 是一个基于 promise 的 HTTP 库，可以用在浏览器和 node.js 中。

1. 常规使用方法

  axios.get('/user?ID=12345').then((response) => {
    console.log(response);
  }).catch((error) => {
    console.log(error);
  });

  axios.post('/user', {
    firstName: 'Fred',
    lastName: 'Flintstone'
  }).then((response) => {
    console.log(response);
  }).catch((error) => {
    console.log(error);
  });

2. 通过向 axios 传递相关配置来创建请求

// 发送 POST 请求
axios({
  method: 'post',
  url: '/user/12345',
  data: {
    firstName: 'Fred',
    lastName: 'Flintstone'
  }
});

3. 使用组件化设置 axios 调用

// request组件，配置axios的请求拦截器和响应拦截器
import axios from "axios";
import { Message, Notification  } from "element-ui";
import store from "../store";
import router from "../router";
import { requestTimeout } from '@/config/settings'

// 创建axios实例
const service = axios.create({
  timeout: requestTimeout,
  // baseURL: process.env.BASE_API, // api的base_url
});

let kk =
// 配置请求拦截器
service.interceptors.request.use(
  (config) => {
    const token = store.state.user.token
    // console.log('token', token)
    if(token){
      config.headers['Authorization'] = 'bearer '.concat(token)
    }
    return config
  },
  (err) => {
    const msg = (err.response && err.response.data.msg) || "未知错误"
    Message.error(msg)
    return Promise.reject(msg)
  }
);

// 配置响应拦截器
service.interceptors.response.use(
  response => {
    if(response.data.code && response.data.code === -1){
      const errMsg = response.data.msg || response.data.errMsg || response.data
      Notification.warning(errMsg)      
    }          
    return response.data
  },
  err => {
    const { status } = err.response;
    const msg = err.response.data.msg || err.response.data.errMsg || err.response.data.message;
    // 以下的处理都是依据 http 状态码 ！！！
    switch (status) {
      // *401时直接删除token，弹出错误，不做任何的请求
      case 401:
        store.commit("REMOVE_TOKEN")
        router.push('/login')
        break;
      default:
        break;        
    }
    Message.error(msg);
    console.log(err)
    return Promise.reject(msg);
  }
);

export default service;
 
// 接口文件，调用具体接口及设置参数传递的形式
import request from "@/utils/request";

// 获取字典表（接口设置示例）
export const getDict = (params) => {
  return request({
    url: "/api/dqgs/admin/dict",
    method: "get",
    params
  });
};