} else {

Request.errorHandle(response);

// return Promise.reject(response.data);

return response;

}

},

// 请求失败

(error: any) => {

const {response} = error;

if (response) {

// 请求已发出，但是不在2xx的范围

Request.errorHandle(response);

return Promise.reject(response.data);

} else {

// 处理断网的情况

// eg:请求超时或断网时，更新state的network状态

// network状态在app.vue中控制着一个全局的断网提示组件的显示隐藏

// 关于断网组件中的刷新重新获取数据，会在断网组件中说明

ElMessage({

message: ‘网络连接异常,请稍后再试!’,

type: ‘success’,

})

}

});

}

/**

• http握手错误

• @param res 响应回调,根据不同响应进行不同操作

*/

private static errorHandle(res: any) {

// 状态码判断

switch (res.status) {

case 401:

break;

case 403:

break;

case 404:

ElMessage({

message: ‘请求的资源不存在’,

type: ‘warning’,

})

break;

default:

ElMessage.error(‘连接错误’);

}

}

}

2.2 main.ts中引入axios和request

import { createApp } from ‘vue’

import App from ‘./App.vue’

import { Request } from ‘@/service/request’

import VueAxios from ‘vue-axios’

import ElementPlus from ‘element-plus’

import ‘element-plus/dist/index.css’

import router from ‘./router’

import store from ‘./store’

import { components } from ‘./plugins/element-plus’

const app = createApp(App)

for (const cpn of components) {

app.component(cpn.name, cpn)

}

app.use(store)

app.use(router)

app.use(ElementPlus)

app.use(VueAxios, Request.init())

app.mount(‘#app’)

2.3 编写接口 api.js

import { Request } from ‘./request’

export function login (parameter: any) {

return Request.axiosInstance({

url: ‘/cxLogin’,

method: ‘post’,

data: parameter

})

}

export function getUserList(parameter?: any) {

return Request.axiosInstance({

url: ‘/users’,

method: ‘get’,

data: parameter

})

}

export function home(parameter?: any) {

return Request.axiosInstance({

url: ‘/home’,

method: ‘post’,

data: parameter

})

}

3. vue组件中使用

<el-form :model=“loginForm” @submit=“handleSubmit”>

<el-button type=“primary” @click=“handleSubmit”>

登陆