axios vuex（Vue2中使用axios的三种方法）

第一种 原始方法 直接在项目中使用(不建议使用)

这种方法最简单粗暴

优点：不需要做封装，不需要做配置傻瓜式操作，不需要做异步处理

缺点：代码太繁琐，当遇到请求过多的时候，这样写不适合读写

注意：如果你封装的请求有问题解决不掉，可以用这种最原始的方式来解决

<template> <div>{{data}}</div> </template> <script> /* 第一步下载 axios 命令：npm i axios 或者yarn add axios 或者pnpm i axios */ /* 第二步引入axios */ import axios from axios export default { data() { return { data:"" }; }, methods: { /* 第三步 写一个name事件 */ name() { axios({ method: "get", url: "http://yufei.shop:3000/tabbar", }).then(res=>{ this.data = res.data /* 将拿到的值，赋值给data */ }) }, }, /* 第四步 在create钩子函数中 将name事件在页面出现的时候执行 */ created() { this.name(); }, }; </script>

第二种 将请求挂载到全局( 推荐使用 )

优点：代码量减少，代码清晰，挂载到全局多处可以使用

缺点：vue3中不能这么使用，vue3换了一种方法来挂在全局

在main.js中

// 引入 axios import axios from axios // 挂载一个自定义属性$http Vue.prototype.$http = axios // 全局配置axios请求根路径(axios.默认配置.请求根路径) axios.defaults.baseURL = http://yufei.shop:3000

在App.js中

<template> <div>{{ data }}</div> </template> <script> export default { data() { return { data:"" }; }, methods:{ async name() { //async await 是解决异步的一种方案，必须要加，但是原生封装就不用 const {data:res} = await this.$http.get(/tabbar) this.data = res } }, created(){ this.name() } }; </script>

第三种 将代码进行封装

优点：代码量减少，代码清晰，挂载到全局多处可以使用，可以多层封装，vue3也可以这么使用

我们在src文件夹种创建一个文件叫APi ，然后在APi当前文件夹下创建一个request.js文件

目录结构如下

request.js代码如下

// 引入 axios import axios from axios // 封装 baseURL const request = axios.create({ baseURL:"http://yufei.shop:3000" }) // 向外暴露 request export default request;

组件APP.vue代码如下

<template> <div>{{ data }}</div> </template> <script> // 1. 导入request import request from @/APi/request.js export default { data() { return { data:"" }; }, methods:{ // 事件name async name() { const res = await request.get(/tabbar) this.data = res.data } }, // 生命周期函数created中调用 事件name created(){ this.name() } }; </script>