简介
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