Some configurations of ajax/axios in the vue project

---

foreword

提示：这里可以添加本文要记录的大概内容：
In the front-end project, ajax/axios is an essential request library for front-end and back-end interactive data, and the project basically needs to do some global configuration for it to better serve the project. This article summarizes some basic configuration information of axios.

---

提示：以下是本篇文章正文内容，下面案例可供参考

1. Install and introduce axios

1. Install axios

cnpm install axios

2. Create a configuration js file in the project and introduce axios

• The location of the created file is shown in the figure
  
• Import axios in the js file

import axios from 'axios';

Second, the configuration of axios

1. create instance

//通过设置一个 `baseURL` 便于为 axios 实例的方法传递相对 URL
let baseURL = process.env.NODE_ENV === 'development' ? '/' : window.CUIT_server.API_ROOT;
//`timeout` 指定请求超时的毫秒数,如果请求时间超过了 `timeout` 的时间，请求将被中断
let timeout = window.CUIT_server.TIMEOUT;
//使用自定义配置新建一个 axios 实例
let http = axios.create({
    
    
  baseURL,
  timeout: 1000000,
  // `headers` 是即将被发送的自定义请求头
  headers: {
    
    
    'Content-Type': 'application/json'
    // Authorization: 'Bearer ' + sessionStorage.getItem('token')
  }
});

2. Add request interceptor

http.interceptors.request.use(
  function (config) {
    
    
  	//请求开始时页面统一的加载转圈效果
    globalLoading.showFullScreenLoading();
    return config;
  },
  function (error) {
    
    
    return Promise.reject(error);
  }
);

3. Add response interceptor

http.interceptors.response.use(
  function (response) {
    
    
  	//响应300ms后，隐藏加载转圈效果
    setTimeout(() => {
    
    
      globalLoading.tryHideFullScreenLoading();
    }, 300);

    if (response.data.code == 3) {
    
    
      router.push({
    
     path: '/' });
    }
    let token = sessionStorage.getItem('token');
    if (token == 'null') {
    
    
      if (window.location.hash == '#/forgotPassword') {
    
    
        router.push({
    
     path: '/forgotPassword' });
      } else {
    
    
        router.push({
    
     path: '/' });
      }
    }
    return response;
  },
  function (error) {
    
    
    globalLoading.tryHideFullScreenLoading();
    return Promise.reject(error);
  }
);

3. Export the http instance and import it in the project entry file

1. Export http instance in axiosInterceptor.js

	export default http;

2. Introduced in main.js

	import axiosHttp from './api/axiosInterceptor';

3. Global configuration in main.js

	Vue.prototype.$axios = axiosHttp;

Summarize

The configuration of axios in the project can be more colorful, which depends on the actual needs of the project. The operation steps of configuration mainly include the following steps:

1. Download axios with npm or cnpm
2. Create a folder dedicated to configuring axios, import axios, and make related configurations
3. Export the configured js file and import it into the main.js (project entry file) file for global configuration