axios拦截、api的统一管理

简介

axios专门用于我们去请求数据，它本身就支持链式的调用，但是我们写项目的时候，每个页面都会发送请求，如果频繁的调用axios会写很多重复的代码，所以我们统一封装一个方法，我们的域名一个项目一般是不会改变的，所以我们可以把那些不变的都封装在这个方法中。然后在另一个文件统一管理我们的请求接口。方便我们后期阅读和维护。

封装axios的具体步骤

1、安装axios到本地

npm install axios --save-dev

2、在项目src目录中创建request文件夹

包含api.js、http.js两个文件，api.js用来统一管理api地址和请求方法，http.js用来封装axios

3、在http.js中封装axios

3-1、首先引入我们所用到的axios、store、vant以及多环境变量，不同环境对应不同api地址

//在http.js中引入axios
import axios from 'axios';
import store from '@/store'
//vant里的提示框
import {
    Toast } from 'vant';

//基本域名
var baseURL = ``;

//创建axios实例  请求超时时间
const instance = axios.create({
   
    baseURL,
    timeout: 500000, //超时时间
    withCredentials:true   //withCredentials是当前请求为跨域类型时是否在请求中协带cookie，默认为false
});

// post请求头
instance.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded;charset=UTF-8';

3-1、添加请求拦截

在发送请求前，要打开加载动画，并获取token，将其添加至请求头，最后返回config。
config是配置的意思。

// 请求拦截器
ins