vue axios 配置流程,调用全局加载的进度条,proxy前端处理跨域问题
vue axios 配置流程,调用全局加载的进度条,proxy前端处理跨域问题
·
1.axios安装
npm i axios
2.安装完成后,创建api文件夹,编辑index.js配置文件
在这里对请求和响应进行了二次封装,并且在请求与响应的阶段执行了一个全局的进度条效果的配置
这里引用用的进度条版本如下 “nprogress”: “^0.2.0”,
// 对于axios进行二次封装 npm 安装axios的方式:cnpm i --save axios
import axios from "axios";
// 引入进度条
import nprogress from 'nprogress'
// 引入进度条的样式
import 'nprogress/nprogress.css'
// 利用axios对象的方法create,去创建一个axios实例
const requests = axios.create({
// 配置对象
baseURL: '/api', //这里的baseURL是基础路径 给请求都带上
timeout: 10000,
})
// 请求拦截器
// 发送请求之前的时候进行一些操作
requests.interceptors.request.use((config) => {
// config 配置对象 对象里面一个重要的属性:header请求头
nprogress.start() //进度条效果
return config
})
// 响应拦截器
requests.interceptors.response.use((res) => {
// 成功的响应数据 服务器的相关的数据返回来之后,响应拦截器能够检测到,可以做一些事
// return res.data;
nprogress.done() //进度条的效果结束
return res.data;
}, (error) => {
// 响应失败的时候的回调函数
return Promise.reject(new Error(error))
})
// 对外部暴露
export default requests
3.封装请求接口 例:在api文件夹下创建 home页面会用到的封装接口
// 在这里配置好的页面就能够通过 import {getListThree} from '@/api/index' 的方式,直接在页面中获取
//想要使用的话 直接如下使用.then的方式就可以
//getListThree()
// .then((res) => {
// console.log(res)
// })
//.catch();
import requests from "./request";
//获取页面中的三级联动的数据列表
export const getListThree = () => {
// 发送请求 返回结果是promise对象
return requests({
url: '/product/getBaseCategoryList',
method:'get'
})
}
4.使用proxy处理可能会遇到的跨域问题 在vue.config.js中配置跨域代理:
const {
defineConfig
} = require('@vue/cli-service')
module.exports = defineConfig({
lintOnSave: false,
transpileDependencies: true,
// 协议,域名,端口号不同,都会导致跨域 webpack的工作方式说明
// 代理跨域 发现的所有的api 第三方进行工作
devServer: {
proxy: {
// 检测到请求中出现了/api的路径的时候,第三方的服务器会执行操作。执行一次转发
// 服务器与服务器之间是没有跨域问题的,浏览器才会存在跨域问题
'/api': {
target: 'http://gmall-h5-api.atguigu.cn', //数据来自哪里就在这里写上
// pathRewrite: {
// '^/api': ''
// },
},
},
},
})
5. 使用router仓库调用
更多推荐
已为社区贡献1条内容
所有评论(0)