Vue3
Vue初步学习
Vue组件学习及Prop传递数据
Vue自定义事件组件交互
组件的生命周期
Vue引入第三方
Axios网络请求
Vue路由配置
Vue状态管理(Vuex)
Vue新特性-组合式API
Vue3加载Element-plus
Vue3管理项目
Vue3项目部署到服务器过程
nodejs安装
本文档使用 MrDoc 发布
-
+
up
down
首页
Axios网络请求
Axios是一个基于promise的网络请求库。 第三方的,需要安装。 > 官网:https://axios-http.com/ 参考文档:https://www.kancloud.cn/yunye/axios/234845/ ## 安装 > npm install --save axios@0.27.2 ## 引入 ### 组件中引入: `import axios from "axios" ### 全局引用,直接在main.js文件中引入: ```js import axios from "axios" const app = createApp(App); app.config.globalProperties.$axios = axios app.mount("#app") //组件中直接调用 // this.$axios ``` ## 网络请求基本示例 ### get请求 ```js // axios的get请求 axios({ method:"get", url:"http://iwenwiki.com/api/blueberrypai/getChengpinDetails.php" }).then(res =>{ console.log(res.data); this.chengpin = res.data.chengpinDetails[0] }) ``` 将请求放到mounted生命周期函数中去。 ### post请求 > w温馨提示: post请求参数是需要额外处理的 1.安装依赖: npm install --save querystring@0.2.1 2.转换参数格式:querystring.stringify({}) ```js // axios的post请求 axios({ method: "post", url: "http://iwenwiki.com/api/blueberrypai/login.php", data: querystring.stringify({ user_id: 'iwen@qq.com', password: 'iwen123', verification_code: 'crfvw' }) }).then(res =>{ console.log(res.data); }) ``` 同样,也可以放到mounted函数中测试。 ### get请求快捷方案 ```js axios.get("http://iwenwiki.com/api/blueberrypai/getChengpinDetails.php").then(res =>{ console.log(res.data); this.chengpin = res.data.chengpinDetails[0] }) ``` ### post请求快捷方案 ```js axios.post("http://iwenwiki.com/api/blueberrypai/login.php", querystring.stringify({ user_id: 'iwen@qq.com', password: 'iwen123', verification_code: 'crfvw'})).then(res =>{ console.log(res.data); }) ``` > d 如果全局中引入了话,只需要在组件中使用的时候,使用this.$axios,而不再是axios了。 ## Axios网络请求的封装 日常应用过程中,一个项目中的网络请求会很多,此时一般会采用的方案是将网络请求进行封装。 ### 创建utils目录,构建request.js utils目录用于存放一些网络请求的方法,如request.js文件 ```js import axios from "axios" import querystring from "querystring" const instance = axios.create({ //网络请求的公共配置 timeout: 5000 }) //构建一个处理错误的函数 const errorHandle = (status, info) => { switch(status){ case 400: console.log("语义错误");break; case 401: console.log("服务器认证失败"); break; case 403: console.log("服务器拒绝访问");break; case 404: console.log("地址错误"); break; case 500: console.log("服务器遇到意外");break; case 502: console.log("服务器无响应"); break; default: console.log("dddd", info);break; } } // 拦截器最常用的 // 发送数据之前 instance.interceptors.request.use( config =>{ //config: 包含着网络请求的所有信息 if(config.method === "post"){ config.data = querystring.stringify(config.data); console.log(config); } return config; }, error => { return Promise.reject(error); } ) // 获取数据之前 instance.interceptors.response.use( response => { return response.status === 200 ? Promise.resolve(response) : Promise.reject(response) }, error =>{ const { response } = error; // 错误的处理才是我们最需要关注的地方 errorHandle(response.status, response.info); } ) export default instance; ``` > 封装好之后,并不能直接在组件中那样使用了。 ### 创建api目录 api存放所有网络请求 - path.js 用于存放所有路径 ```js const base = { baseUrl: "http://iwenwiki.com",//公共的网址路径 chengpin: "/api/blueberrypai/getChengpinDetails.php", login: "/api/blueberrypai/login.php", // 许多路径都可以放到这儿 } export default base; //把base导出 ``` - index.js用于存放所有网络请求 ```js import instance from "../utils/request" import path from "./path" const api = { //成品详情地址 getChengpin() { return instance.get(path.baseUrl + path.chengpin) }, // post请求进行login postLogin(){ return instance.post(path.baseUrl + path.login, { user_id: 'iwen@qq.com', password: 'iwen123', verification_code: 'crfvw' }) } //在这儿,可以放很多网络请求 } export default api; ``` ### 组件进行调用 ```html <template> <div class="hello"> <h1>Axios使用 {{ msg }}</h1> </div> </template> <script> import api from "../api/index" export default { name: "axiosUse", props:{ msg: String }, mounted(){ api.getChengpin().then(res =>{ console.log("1111", res.data); }), api.postLogin().then(res =>{ console.log("2222", res.data); }) } } </script> <style> </style> ``` ## 网络请求跨域解决方案 js采取的是同源策略,同源策略是浏览器的一项安全策略,浏览器只允许js代码请求和当前所在**服务器域名,端口,协议相同**的数据接口上的数据,这就是同源策略。  ### 目前主流的跨域解决方案有两种 - 后台解决:cors - 前端解决:proxy ### 前端解决方法:proxy vue.config.js文件中配置: ```js devServer:{ proxy:{ 'api':{ target:'http://iwenwiki.com/', changeOrigin: true } } } ``` 然后组件中使用的时候: ```js axios.get('/api/FingerUnion/list.php').then(res => { console.log(res.data); }); ```
laihui126
2022年9月14日 17:37
分享文档
收藏文档
上一篇
下一篇
微信扫一扫
复制链接
手机扫一扫进行分享
复制链接
关于 MrDoc
觅道文档MrDoc
是
州的先生
开发并开源的在线文档系统,其适合作为个人和小型团队的云笔记、文档和知识库管理工具。
如果觅道文档给你或你的团队带来了帮助,欢迎对作者进行一些打赏捐助,这将有力支持作者持续投入精力更新和维护觅道文档,感谢你的捐助!
>>>捐助鸣谢列表
微信
支付宝
QQ
PayPal
下载Markdown文件
分享
链接
类型
密码
更新密码