在vue项目中axios发起哀求时的小知识

手机游戏开发者 · 2024-9-7 20:57:47

1.发起axios哀求时，喜欢使用async和await来修饰

使用axios发起哀求时，我们在一些文章大概视频当中多多少少都会看到async和await这对兄弟？以是它们到底是什么意思呢？为什么要写成如许子？
async和await是es7的语法，着实我们不必要深入明白，就当养成风俗就好，以跋文着发送axios哀求的时间加上这对修饰兄弟就行
async就是一个修饰符，用来修饰函数的，await是用来等候吸收数据回传的。
import axios from 'axios'methods:{async getInfo(){ const {data:res} = await axios.get('url')console.log(res) }}如果看不懂{data:res} ，这是加上了对象解构（es6的知识），也是代码中常见的，酿成如许你大概就懂了。
const res = data

2.将axios挂载到vue的原型上

为什么必要将axios挂载到vue的原型上？由于你想在每个组件中使用axios时都必要额外写上一句
import axios from 'axios'如许显然有些贫苦和累赘。
以是为相识决这种频仍的使用axios需求，一样平常我们都在vue-cli项目中的main.js文件中举行设置，将axios直接挂载到vue的原型上去。
main.js设置文件：
import axios from 'axios'Vue.prototype.axios = axios其他组件在使用axios发起哀求时就不再必要import额外导入axios了，直接用this调用即可，它会直接访问到我们的组件实例。
methods:{async getInfo(){ const {data:res} = await this.axios.get('url') console.log(res)  }}除此之外呢，我们大概会在一些文章或视频上看到axios挂载原型的不同写法,细致的你会发现怎么跟前面的不一样，信赖许多新手都估计很懵,为什么挂载个axios另有这么多种写法：我这里就罗列常见的2种定名
如果你的main.js如许挂载axios的原型:
import axios from 'axios'Vue.prototype.$axios = axios那么组件想调用就必要写成如许：
methods:{async getInfo(){ const {data:res} = await this.$axios.get('url') console.log(res)  }}另有的喜欢写成如许子的：
import axios from 'axios'Vue.prototype.$http= axios那么组件调用的时间就相应写成云云了：
methods:{async getInfo(){ const {data:res} = await this.$http.get('url') console.log(res)  }}总结：
他们着实就仅仅只是定名不同，效果照旧是一样的，只是为了烘托代码逼格高点而已，名字你任意起着实都是可以的，但我们一样平常现在都服从开发规范风俗，直接写成: $http和$axios这两种定名，此中又以$http如许定名为主流，以是你在网上看到许多多数是写成Vue.prototype.$http= axios。
以是现在，你清楚了这几种写法了吗？
将axios挂载到vue的原型上，让axios酿成一个共享成员，如许每个组件就可以访问我们的axios了，不再必要额外import导入axios。

3.全局设置axios的哀求根路径

为什么必要全局设置axios的哀求根路径？答案固然是为了方便后期维护。
没全局设置axios的哀求根路径时，是如许发起哀求的：
methods:{async getInfo(){ const {data:res} = await this.$http.get('http://www.xxx.com:3000/api/get') console.log(res) }}接下来，让我们举行全局设置axios的哀求根路径：
在main.js中写下这个固定结构：
axios.defaults.baseUrl = 'http://www.xxx.com:3000'举行全局设置axios的哀求根路径后，我们是如许发起哀求的：
methods:{async getInfo(){ const {data:res} = await this.$http.get('/api/get') console.log(res) }}

4.将axios挂载到Vue的原型上，倒霉于API接口的复用

上面这句话是什么意思呢？我们来看一下下面的案例模仿。
比如我们现在有a、b、c三个组件，三个组件都必要消息接口返回的数据举行页面渲染，那么三个组件都必要写成下面一串代码。
a组件发起消息接口哀求：
<template> <div>       <button @click="getList">点击</button> </div></template><script> export default {       methods: {          async getInfo() {             const { data: res } = await this.$http.get('/api/get')             console.log(res)          }       }, }</script>b组件发起消息接口哀求：
<template> <div>       <button @click="getList">点击</button> </div></template><script> export default {       methods: {          async getInfo() {             const { data: res } = await this.$http.get('/api/get')             console.log(res)          }       }, }</script>c组件发起消息接口哀求：
<template> <div>       <button @click="getList">点击</button> </div></template><script> export default {       methods: {          async getInfo() {             const { data: res } = await this.$http.get('/api/get')             console.log(res)          }       }, }</script>绝不例外，abc三个组件分别都去调用了同一个消息接口去获取数据，如许子就没办法到达接口的复用效果了。
那么为了方便我们api接口的复用，我们为什么不写一份代码，实用三个组件呢？而不是写三分冗余代码。
正由于这种复用api的需求，以是我们是不是可以把组件中使用组合式API创建的逻辑抽取出来封装成可复用的模块呢？

5.封装工具类，这种不必要挂载到vue的原型上

创建一个utils工具类目次，封装一个request.js工具模块
/src/utils/request.js
import axios from "axios";const request = axios.create({ //指定哀求的根路径 baseURL:'https://www.xxx.com'})//一样平常我们在这里还会封装一个哀求拦截器和一个相应拦截器export default request组件页面想要使用时，举行封装一个组件调用接口的方法：
<script>import request from "../utils/request"export default { data(){ return { page:1, limit:10 } }, created(){ this.initArticleList() }, methods:{ //封装获取文章列表数据的方法 async initArticleList(){ //发起get哀求，获取文章列表数据 const {data:res} = await request.get('/articles',{ //设置哀求参数 params:{ _page:this.page, _limit:this.limit } }) console.log(res); //将data解构出来取名为res } }}</script>但如果其他页面必要这个接口的数据的时间，仍旧要写一份如许的冗余代码，以是照旧没有实现复用。
我们要做的着实照旧必要将组件封装的调用接口的方法提取出来，举行再一步的接口封装。

6.api接口封装

创建api目次,封装一个与文章相干的api
/src/api/articleAPI.js
先写一个简单的模板方便我们明白
//文章相干的api接口，都封装到这个模块中// 向外按需导出一个api函数，哪个组件要用谁就要按需导入这个函数export const getArticleListAPI = () =>{ console.log('调用了getArticleListAPI函数');}某个组件中使用
<script>//按需导入api接口import { getArticleListAPI } from "../api/articleAPI"getArticleListAPI()</script>完备的一个demo展示：
/src/api/articleAPI.js
//文章相干的api接口，都封装到这个模块中//引入我们封装好的axios工具import request from '@/utils/request'// 向外按需导出一个api函数，哪个组件要用谁就要按需导入这个函数export const getArticleListAPI = (_page,_limit) =>{ //吸收那边传入的2个参数 return request.get('articles',{       //设置哀求参数       params:{          _page, //原来要写成如许的_page:_page,由于es6语法同名可以写成如许_page,          _limit       } })}/src/views/xxx.vue组件中调用接口
<script>import { getArticleListAPI } from "../api/articleAPI"export default { data(){       return {          page:1,          limit:10       } }, created(){       this.initArticleList() }, methods:{       //封装获取文章列表数据的方法       async initArticleList(){          //发起get哀求，获取文章列表数据          const {data:res} = await getArticleListAPI(this.page,this.limit) //传入2个参数       } }}</script>如许就实现了api复用的效果，比如我们有别的一个组件必要调用这个获取文章列表数据的接口，只需直接传进参数即可。
/src/views/news.vue组件中调用接口,比如这个页面必要转达5条数据，只需修改一下传进去的参数即可
<script>//按需导入api接口import { getArticleListAPI } from "../api/articleAPI"export default { data(){       return {          page:1,          limit:5       } }, created(){       this.initArticleList() }, methods:{       //封装获取文章列表数据的方法       async initArticleList(){          //发起get哀求，获取文章列表数据          const {data:res} = await getArticleListAPI(this.page,this.limit) //传入2个参数          console.log(res)       } }}</script>

在vue项目中axios发起哀求时的小知识

所属分类: 问答交流

新帖推荐: 30日

推荐作品