四、axios使用

1）安装：

cnpm i axios -S

2）封装

// 文件路径：src/config/request.js
import Axios from 'axios';

// 创建Axios实例
const requests = Axios.create({
  baseURL: "/api", // 基础路径
  timeout: 5000 // 超时时长
})

// 请求拦击
requests.interceptors.request.use((config) => {
  return config;
})

// 响应拦截
requests.interceptors.response.use((res) => {
  return res.data;
}, (err) => {
  // 终结promise链
  return Promise.reject(new Error("请求失败！"));
})

export default requests;

3）代理

// vue.config.js
module.exports = {
  // 关闭eslint校验
  lintOnSave: false,
  // 代理
  devServer: {
    proxy: {
      '/api': {
        target: 'http://39.98.123.211', // 代理目标路径
        // pathRewrite: { '^/api': '' }, // 重写/api
      },
    },
  },
}

4）使用

// src/api/index.js
import requests from '@/config/request';

export const categoryList =  () => {
  return  requests({
    url: "/product/getBaseCategoryList",
    method: "get",
  })
}

5）配合nprogress进度条插件使用

// src/config/request.js
// 引入nprogress进度条插件
import nprogress from 'nprogress';
// 引入nprogress进度条样式
import "nprogress/nprogress.css"

// 请求拦击
requests.interceptors.request.use((config) => {
  // 开启进度条
  nprogress.start()
  return config;
})

// 响应拦截
requests.interceptors.response.use((res) => {
  // 结束进度条
  nprogress.done()
  return res.data;
}, (err) => {
  // 终结promise链
  return Promise.reject(new Error("请求失败！"));
})