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