一、安装axios
首先在项目中安装axios
npm install axios
二、二次封装axios
在项目的src文件夹下创建api文件夹,在该文件夹下创建index.js和request.js文件,分别用来二次封装axios和API接口的请求
-
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
-
index.js文件
/** * 当前模块进行API统一管理 * 当项目很小时,完全可以在组建中发请求,也就是说可以在组件挂载或者渲染的时候发请求 * 对外暴露该接口,当有组建使用的时候可以直接拿到相关的数据 * */ import requests from "./request" // 登录接口 export const reqGetLogin = () => requests({url:'/user/login',method:'post'})
三、跨域问题
虽然我们二次封装好了axios并且进行了数据请求,但是在进行请求数据的时候,我们通常会遇到跨域的问题
-
什么是跨域问题
协议、域名、端口号不同的请求,称之为跨域比如:
http://localhost:8080/XXX —前端项目本地服务器
http://12.23.345.111 —后台服务器
协议相同,域名端口号都不同,即出现了跨域
-
如何解决跨域问题
通常解决跨域问题使用:JSONP、CROS、代理(本文使用代理解决)
解决跨域问题我们只需要在vue.config.js文件中配置如下代码
devServer: { proxy: { // 在发请求的时候,带有ding的请求就会通过代理服务器去找服务器要数据 "/ding": { // 此处填写后端服务器IP地址 target: "http://xxx.xx.xxx.xxx", }, }, },
在main.js文件中做相应的检测
// 测试接口数据 import {reqGetLogin} from '@/api' reqGetLogin()
如此一来,我们就可以正常获取后端数据