在untils文件夹中创建request.js文件，引入axios和axios-retry模块
import axios from "axios";
import axiosRetry from 'axios-retry';
3.创建axios实例
const service = axios.create({
baseURL: "/api/v1.0",
timeout: 20*1000,
4.配置axios-retry
axiosRetry(service, {
retries: 3,
retryDelay: (retryCount) => {
return retryCount * 1500;
shouldResetTimeout: true,
retryCondition: (error) => {
if (error.message.includes('timeout') || error.message.includes("status code")) {
return true;
} else {
return false;
5.配置axios请求方式
这里用到了qs，需要引入，qs是内部模块，不需要安装
import qs from "qs";
const http = {
get(url, params) {
const config = {
method: 'get',
url: url
if (params) config.params = params;
return service(config);
post(url, params) {
const config = {
method: 'post',
url: url
if (params) config.data = qs.stringify(params)
return service(config)
导出，方便请求接口的时候使用
export default http;
6.其他配置
request.js中还可以配置请求拦截器以及响应拦截器
7.引入使用
现在request.js已经配置好了，只需要引入文件就可以使用
我们在src下再创建一个文件夹，api，用来存放请求接口函数，里面可以按照接口类型分成多个文件
现在我们封装一个登录的请求接口，首先引入之前配置好的request.js
import http from "@/untils/request"
export function login(params) {
return http.get(`/login`，params);
我们再在登录页面login.vue中引入使用
import * as API_User from "@/api/user";
export default {
data() {
return {
username: "",
password: "",
verificationcode："",
methods: {
submit(){
const {username, password,verificationcode}=this;
API_User.login({ username, password,verificationcode }).then((res) => {
console.log(res);
现在我们请求接口只需要调用api中的一个函数就可以实现了，同时如果请求失败也会进行多久重新请求，大功告成
