axios使用，在vue中的使用（私有和全局，封装api接口模块） ajax

axios 是一个专注于网络请求的库！

axios中文网|axios API 中文文档 | axios
目录
axios在HTML使用
1.axios基本使用
2.axios封装的六个属性
?
2.axios的基本使用（Promise对象await和async简化写法）
3.axios直接发起的GET和POST请求

axios在Vue中的使用
方法一：私有组件使用axios
1.先装包（npm i axios -S）
2.在组件内使用

方法二：全局配置axios请求根路径（Vue2）
1.在main.js文件（把axios挂载到Vue.prototype上）
1.1在基于vue-cli创建的vue2项目中
1.2在基于vite创建的Vue3项目中全局配置axios
2.在App.vue文件使用axios

方法三：请求根路径的封装文件reqest.js和api接口封装模块
1.在src目录创建utils文件夹，复用的方法等可以封装到这里，如请求根路径的封装文件request.js：
2.在src目录下创建api文件，各种类型的api接口都可以封装到各个模块中
【axios使用，在vue中的使用（私有和全局，封装api接口模块）】3.在需要使用调用接口方法的组件进行按需导入API接口，并封装请求接口的方法，在created生命周期进行调用
axios的请求回来的数据是个Promise对象
1.需要配合async和await进行使用，并对请求过来的进行解构赋值
2.如果需要对请求回来的res进行新数据和旧数据的拼接，则可以用到数组的扩展运算符...

axios在HTML使用 1.axios基本使用

2.axios封装的六个属性

文章图片

文章图片

2.axios的基本使用（Promise对象await和async简化写法）解构赋值后使用：重命名

1.调用axios之后，使用async和await进行简化
2.使用解构赋值，将axios封装的大对象中，把data属性解构出来
3.把解构出来的data属性，使用冒号进行重命名，一般重命名为{data：res}

3.axios直接发起的GET和POST请求

文章图片

axios在Vue中的使用方法一：私有组件使用axios 1.先装包（npm i axios -S）
2.在组件内使用

方法二：全局配置axios请求根路径（Vue2） 1.在main.js文件（把axios挂载到Vue.prototype上）
1.1在基于vue-cli创建的vue2项目中
把axios挂载到Vue.prototype上，供每个.vue组件使用，之后在每个.vue组件中发起请求，调用this.$http即可,不需要再导入,，但把axios挂载到vue原型上，不利于api接口的复用

import Vue from 'vue' import App from './App.vue' import axios from 'axios'Vue.config.productionTip = false/* 全局配置axios的请求根路径 */ axios.defaults.baseURL = 'http://www.api' /* 把axios挂载到Vue.prototype上，供每个.vue组件使用 */ Vue.prototype.$http = axios /* 之后在每个.vue组件中发起请求，调用this.$http即可,不需要再导入, 但把axios挂载到vue原型上，不利于api接口的复用 */new Vue({ render: h => h(App) }).$mount('#app')

1.2在基于vite创建的Vue3项目中全局配置axios
在 main.js 入口文件中，通过 app.config.globalProperties 全局挂载 axios，其余步骤与vue2 相同

import { createApp } from 'vue' import App from './App.vue'/* 导入bootstrap样式表 */ import './assets/css/bootstrap.min.css' import './index.css'/* 导入axios进行全局配置 */ import axios from 'axios'const app=createApp(App)/* 配置请求的根路径 */ axios.defaults.baseURL='https://www.escook.cn'/* 将 axios 挂载到全局，今后，每个组件中，都可以直接通过this.$http 代替 axios 发起 Ajax 请求 */ app.config.globalProperties.$http=axiosapp.mount('#app')

2.在App.vue文件使用axios

方法三：请求根路径的封装文件reqest.js和api接口封装模块 1.在src目录创建utils文件夹，复用的方法等可以封装到这里，如请求根路径的封装文件request.js：

import axios from 'axios'const request = axios.create({ // 指定请求的根路径 baseURL: 'https://www.escook.cn' })export default request

axios.create（）方法原理：

文章图片

2.在src目录下创建api文件，各种类型的api接口都可以封装到各个模块中
如：在api文件夹下创建 articleAPI.js 该模块用于封装文章相关的API接口

// 文章相关API接口，都封装到这个模块中 import request from '@/utils/request'// 向外按需导出一个API函数 export const getArticleListAPI = function (_page, _limt) { return request.get('/articles', { // 请求参数 params: { _page, _limt } }) }

如：在api文件夹下创建 userAPI.js该模块用于封装用户相关的API接口

import request from '@/utils/request'// 接口调用，纯粹演示，没有提供该接口 export const getUserInfoAPI = function () { return request.get('/user') }

3.在需要使用调用接口方法的组件进行按需导入API接口，并封装请求接口的方法，在created生命周期进行调用

axios的请求回来的数据是个Promise对象 1.需要配合async和await进行使用，并对请求过来的进行解构赋值

async btnGetBooks () { const { data: res } = await axios.get('http://..../api/get') console.log(res) }

2.如果需要对请求回来的res进行新数据和旧数据的拼接，则可以用到数组的扩展运算符...
如：this.artlist = [...res, ...this.artlist]

methods: { // 封装获取文字列表数据的方法 async initArticleList (isRefresh) { const { data: res } = await getArticleListAPI(this.page, this.limt)if (isRefresh) { // 证明是下拉刷新，新数据在前，旧数据在后 // this.artlist = [旧数据在后，新数据在前] this.artlist = [...res, ...this.artlist] this.isLoading = false } else { // 如果是上拉加载更多，那么应该是 // this.artlist = [旧数据在前，新数据在后] this.artlist = [...this.artlist, ...res] this.loading = false } if (res.length === 0) { // 证明没有下一页数据了，直接把finished改成true this.finished = true } } }

在main.js入口文件中，通过app.config.globalProperties全局挂载 axios