vue项目中ajax/axios的一些配置


前言

提示:这里可以添加本文要记录的大概内容:
在前端项目中,ajax/axios是必不可少的前后端交互数据的请求库,项目基本上也要对其做一些全局的配置来更好的服务项目。本篇就axios一些基本的配置信息做下总结。


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

一、安装并引入axios

1.安装axios

cnpm install axios

2.在项目中创建一个配置js文件并引入axios

  • 创建的文件位置如图所示
    在这里插入图片描述
  • 在js文件中导入axios
import axios from 'axios';

二、axios的配置

  1. 创建实例
//通过设置一个 `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')
  }
});
  1. 添加请求拦截器
http.interceptors.request.use(
  function (config) {
  	//请求开始时页面统一的加载转圈效果
    globalLoading.showFullScreenLoading();
    return config;
  },
  function (error) {
    return Promise.reject(error);
  }
);
  1. 添加响应拦截器
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);
  }
);

三、导出http实例并在项目入口文件中导入

  1. 在axiosInterceptor.js中导出http实例
	export default http;
  1. 在main.js中引入
	import axiosHttp from './api/axiosInterceptor';
  1. 在main.js中进行全局配置
	Vue.prototype.$axios = axiosHttp;

总结

axios在项目中的配置可以更加的丰富多彩,这需要看项目的实际需要了。配置的操作步骤主要就以下几步:

  1. 用npm或cnpm下载axios
  2. 创建一个专门配置axios的文件夹,导入axios,并做相关的配置
  3. 导出配置的js文件,并且在main.js(项目入口文件)文件中引入,进行全局的配置
  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值