Axios封装

一、目的

对Axios进行一下通用化的封装，目的是帮助简化代码和利于后期的更新维护。可以通用的配置如timeout、baseURL等抽取出来，对请求进行拦截处理等，方便后期管理。

二、步骤

1.准备工作(安装axios、element-plus)

npm install axios
npm install element-plus

2.请求配置(封装axios请求为request.js文件)

在src目录下新建utils文件夹，在utils文件夹下新建request.js文件

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

// 网络请求公共配置
const instance = axios.create({
    // 超时时间
    timeout:5000
})

// 请求拦截器
instance.interceptors.request.use(
    config =>{
        // 处理post请求、添加token头等
        return config
    },
    error => {
        return Promise.reject(error)
    }
)
// 响应拦截器
instance.interceptors.response.use(
    response =>{
       if (response.status !== 200) {
            return Promise.reject(response);
        }
        // 当后台使用封装commonResult时进行统一异常信息打印
        if (response.data.success !== undefined && response.data.success !== null && !response.data.success) {
            ElMessage.error("服务器访问出错，err=" + response.data.message);
            return Promise.reject(response)
        }
        return Promise.resolve(response)
    },
    error => {
        const { response } = error
        errorHandle(response.status,response.statusText)
    }
)

const errorHandle = (status,info) => {
    switch (status){
        case 400:
            ElMessage.error("请求语义错误，info=" + info)
            break;
        case 401:
            ElMessage.error("服务器认证失败，info=" + info)
            break;
        case 403:
            ElMessage.error("服务器拒绝访问，info=" + info)
            break;
        case 404:
            ElMessage.error("请求地址错误，info=" + info)
            break;
        case 500:
            ElMessage.error("服务器遇到意外，info=" + info)
            break;
        case 502:
            ElMessage.error("服务器无响应，info=" + info)
            break;
        default:
            ElMessage.error("未知错误，请联系管理员，info=" + info)
            break;
    }
}

export default instance

3.请求方法(引入请求配置)

在src目录下新建api文件夹，在api文件夹中创建xxx.js，如product.js

import axios from "../utils/request"

const apiProduct = {
    // 获取商品信息
    getProducts(){
        return axios.get('/api/products/')
    },
    // 获取商品价格
    getProductsPrice(numObj){
        return axios.get('/api/products/price', {params:numObj})
    },
    // 添加商品信息
    addProduct(product){
        return axios.post('/api/products/', product)
    }
}
export default  apiProduct

4.跨域问题

JavaScript采用的同源策略，同源策略时浏览器的一项安全策略，浏览器只允许JS代码请求和当前服务器域名、端口、协议相同的数据接口的数据。也就是说，当域名、端口、协议任意一个不同时，都会产生跨域问题。

其中一种解决方案通过前台proxy代理，可在vue.config.js文件中做如下配置

const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
  transpileDependencies: true,
  devServer: {
    proxy: {
      '/api': {
        // 此处的写法，目的是为了 将 /api 替换成 http://localhost:8081/
        target: 'http://localhost:8081/',
        // 允许跨域
        changeOrigin: true,
        pathRewrite: {
          '^/api': ''
        }
      }
    }
  }
})