Vue项目二次封装axios以及请求数据后台数据

一、安装axios

首先在项目中安装axios

npm install axios

二、二次封装axios

在项目的src文件夹下创建api文件夹，在该文件夹下创建index.js和request.js文件，分别用来二次封装axios和API接口的请求

1. request.js文件

   // 引入axios
   import axios from "axios";
   
   // 创建axios实例对象
   let requests = axios.create({
       // 基础路径
       baseURL: "/ding",
       // 设置请求超时的时间
       timeout: 3000
   })
   
   // 请求拦截器：在发请求之前，请求拦截器可以检测到，可以在发出请求之前做一些事情
   requests.interceptors.request.use((config) => {
       // config:配置对象，对象里边有一个属性很重要，headers请求头
       return config
   })
   
   // 响应拦截器
   requests.interceptors.response.use((res) => {
       // 成功的回调函数：服务器响应的数据回来以后，响应拦截器可以检测到，可以做一些事情
       return res.data
   }, (error) => {
       // 响应失败的回调函数
       return Promise.reject(new Error('faile'))
   })
   
   // 对外暴露
   export default requests
   

2. index.js文件

   /**
    * 当前模块进行API统一管理
    * 当项目很小时，完全可以在组建中发请求，也就是说可以在组件挂载或者渲染的时候发请求
    * 对外暴露该接口，当有组建使用的时候可以直接拿到相关的数据
    * 
    */
   
   import requests from "./request"
   
   // 登录接口
   export const reqGetLogin = () => requests({url:'/user/login',method:'post'})
   

三、跨域问题

虽然我们二次封装好了axios并且进行了数据请求，但是在进行请求数据的时候，我们通常会遇到跨域的问题

1. 什么是跨域问题

   协议、域名、端口号不同的请求，称之为跨域比如：

   http://localhost:8080/XXX —前端项目本地服务器

   http://12.23.345.111 —后台服务器

   协议相同，域名端口号都不同，即出现了跨域

2. 如何解决跨域问题

   通常解决跨域问题使用：JSONP、CROS、代理（本文使用代理解决）

   解决跨域问题我们只需要在vue.config.js文件中配置如下代码

   devServer: {
       proxy: {
         // 在发请求的时候，带有ding的请求就会通过代理服务器去找服务器要数据
         "/ding": {
           // 此处填写后端服务器IP地址
           target: "http://xxx.xx.xxx.xxx",
         },
       },
     },
   

   在main.js文件中做相应的检测

   // 测试接口数据
   import {reqGetLogin} from '@/api'
   reqGetLogin()
   

   如此一来，我们就可以正常获取后端数据