axios判断服务器是否响应,axios响应拦截提示

一、前言

众所周知，axios是一个基于 promise 的异步请求数据的 HTTP 库；

而在客户端在请求数据时候，我们可以去设置请求拦截器，可以设置token令牌去进行后续请求数据的校验

而在响应数据的时候，http响应包会给我们返回响应的状态码，我们去根据不同的响应的状态码给出一些警告提示信息

二、代码实现

1.需要引入Axios 库和 element-ui库

import Axios from 'axios';

import { MessageBox, Message } from 'element-ui'

2.创建AxiosServe示例

export const baseURL = "http://192.168.0.101:8088";

//创建一个axios实例

const AxiosServe = Axios.create({

baseURL, // 请求服务器地址

timeout: 2000 // 设置时间超时，单位毫秒

})

3.设置响应拦截器

// 响应拦截器

AxiosServe.interceptors.response.use((response) => {

// 响应做些什么

console.log('response,' response);

// 返回请求成功的数据是response对象的data值

return response.data;

}, (err) => {

// 状态码

switch (err.response.status) {

case 404:

case 400:

Message({ type: 'error', message: '客户端请求有语法错误，不能被服务器所理解' });

break;

case 403:

Message.error({message:'权限不足,请联系管理员!'});

case 504:

case 505:

case 500:

Message({ type: 'error', message: '服务器发生不可预期的错误'});

break;

default:

Message.error({ message: '未知错误!'});

}

})

4.完整代码

import Axios from 'axios';

import { MessageBox, Message } from 'element-ui'

// export const baseURL = "http://it.warmtel.com"; //正式环境

export const baseURL = "http://192.168.0.101:8088"; // 开发环境

//创建一个axios实例

const AxiosServe = Axios.create({

baseURL,

timeout: 2000

})

// 响应拦截器

AxiosServe.interceptors.response.use((response) => {

// 响应做些什么

return response.data;

}, (err) => {

// 状态码

switch (err.response.status) {

case 404:

case 400:

Message({ type: 'error', message: '客户端请求有语法错误，不能被服务器所理解' });

break;

case 403:

Message.error({message:'权限不足,请联系管理员!'});

case 504:

case 505:

case 500:

Message({ type: 'error', message: '服务器发生不可预期的错误'});

break;

default:

Message.error({ message: '未知错误!'});

}

})