axios二次封装步骤,配置代理服务器

为什么要二次封装axios,二次封装axios的好处有那些？

axios官网
axios是一个基于primise的网络请求库，可以方便我们进行网络请求。
二次封装的好处：便于我们更好的管理接口，不至于请求接口很多的情况下，出现混乱。
通常我们的项目会越做越大,页面也会越来越多,如果页面非常的少,直接用axios也没有什么大的影响,那页面组件多了起来,上百个接口呢,这个时候后端改了接口,多加了一个参数什么的呢?那就只有找到那个页面,进去修改.整个过程很繁琐不易于项目的维护和迭代.

这个时候如果我们统一的区管理接口,需要修改某一个接口的时候直接在api里修改对应的请求是不是很方便呢?因为我们用的最多的还是get post请求.我们就可以针对封装.

一、配置步骤 （vue2）

1、创建好文件后在utils文件内创建index.js文件并在文件内配以下代码

// 导入axios
import axios from 'axios'
// 创建axios
const request = axios.create({
// 配置代理接口
// 不需要配置代理服务器的话可以直接写域名
// baseURL: 'https://www.xxx.xx',
  baseURL: '/api',
  // 响应时间
  timeout: 3000
})
// 暴露
export default request

2、创建api文件夹，在阿皮文件下建index.js

// 导入utils文件下内index.js文件
import request from '../utils/index.js'
// 分别暴露的方式暴露内容
export const loginAPI = (loginObj) => {
// 返回请求的数据
  return request({
  // 配置请求方式
    method: 'POST',// GET/POSH
    // 请求接口地址
    url: '/login',
    // 要传递的参数
    data: {
      loginObj
    }
  })
}

3、配置代理服务器
在vue.config.js中配置代理服务器，用于跨域

module.exports = {
  devServer: {
    proxy: {
      '/api': {
        // 代理目标地址
        target: 'http://1.116.64.64:5004/api2',
        // 允许跨越
        changeOrigin: true,
        // 重写路径
        pathRewrite: {
          '^/api': ''
        }
      }
    }
  }
}

4、使用封装axios

// 引入
import { loginAPI } from '@/api'
// 使用封装后的axios发送请求
async Fn(){
const { data: { message, status, token } } = await loginAPI(要传递的参数/没参数不用传) // 将参数传到api/index.js文件内
}

二、请求拦截器配置token请求头

在api文件内index.js下配置

// 添加请求拦截器
request.interceptors.request.use(
  function (config) {
    // 在发送请求之前做些什么
    // 通过config来添加token
    config.headers.token = getToken('token')
    console.log(config)
    return config
  },
  function (error) {
    // 对请求错误做些什么
    return Promise.reject(error)
  }
)

f.