Request封装

request的封装主要分为三部分，axios的创建、请求拦截器、响应拦截器、导出axios

一、引入axios

引入前先下载依赖：

npm install axios

 引入

import axios from 'axios';

二、创建axios

设置一个变量来存储根域名，baseURL是请求服务器根域名，timeout超时时间限制

let BASE_URL = 'http://192.168.0.103'
// 配置新建一个 axios 实例
const service = axios.create({
	baseURL: BASE_URL,
	timeout: 50000,
});

三、创建请求拦截器

在开发项目中不可缺少的就是token，一般放在vuex创建的store中或者本地存储，请求时配置请求头携带token，可根据项目指定的前后端标准去自行配置即可。在错误回调中要return 异常（Promise.reject(error))

补充：Promise对象可以处于三种状态：pending（待定），fulfilled（已兑现），和rejected（已拒绝）。

//service.interceptors.request.use中有两个回调函数，一个是config一个是error，用箭头函数去接收这两个回调
service.interceptors.request.use(
	(config) => {
		// 验证token
		if (localStorage.getItem('token')) {
			config.headers['Authorization'] = `Bearer ${localStorage.getItem('token')}`;
		}
		return config;
	},
	(error) => {
		return Promise.reject(error);
	}
);

四、创建响应拦截器

响应拦截器就是后端返回你数据是做的一系列操作。

自定义一个变量接收response.data(其中可以根据response返回的结构去获取内容）

//service.interceptors.response.use中有两个回调函数，一个response，一个error
service.interceptors.response.use(
  response => {
    const res = response.data
    // 自定义状态码验证 （code是后端返回的需要与后端统一约定）
    if (res.code !== 200) {
      ElMessage.error(res.message || 'Error')
      return Promise.reject(new Error(res.message || 'Error'))
    } else if... 
     else {
      return res
    }
  },
  error => {
    // 处理HTTP网络中的错误（status）
    let message = ''
    if (error && error.response) {
      switch (error.response.status) {
        case 401:
          message = "认证失败，请重新登录"
          break
        case 403:
          message = "当前操作没有权限"
          break
        case 404:
          message = "资源不存在"
          break
        case 500:
          message = "接口异常"
          break
        default:
          message = "网络异常，请稍后重试"
      }
    }
    ElMessage.error(message)
    return Promise.reject(error)
  }
)

五、导出 axios

export default service;

完整代码： 

import axios from 'axios';
import { ElMessage} from 'element-plus';

let BASE_URL = 'http://192.168.0.103'
// 配置新建一个 axios 实例
const service = axios.create({
	baseURL: BASE_URL,
	timeout: 50000,
});

// 添加请求拦截器
service.interceptors.request.use(
	(config) => {
		// 验证token
		if (localStorage.getItem('token')) {
			config.headers['Authorization'] = `Bearer ${localStorage.getItem('token')}`;
		}
		return config;
	},
	(error) => {
		return Promise.reject(error);
	}
);

// 添加响应拦截器
// 响应拦截器
service.interceptors.response.use(
  response => {
    const res = response.data
    // 自定义状态码验证 （code是后端返回的需要与后端统一约定）
    if (res.code !== 200) {
      ElMessage.error(res.message || 'Error')
      return Promise.reject(new Error(res.message || 'Error'))
    } else {
      return res
    }
  },
  error => {
    // 处理HTTP网络中的错误（status）
    let message = ''
    if (error && error.response) {
      switch (error.response.status) {
        case 401:
          message = "认证失败，请重新登录"
          break
        case 403:
          message = "当前操作没有权限"
          break
        case 404:
          message = "资源不存在"
          break
          case 500:
          message = "接口异常"
          break
        default:
          message = "网络异常，请稍后重试"
      }
    }
    ElMessage.error(message)
    return Promise.reject(error)
  }
)

// 导出 axios 实例
export default service;

有什么优化和见解可以随时评论沟通！作者是打着学习吸取经验发布的文章，望指正