Vue3 中 axios 的安装及使用

前言：

在编写vue里的项目时，必须要用和后台进行合作，我们始终绕不开对 axios 的使用 ，vue3 中 axios 进行了一些重要的更新，在这里分享给大家

---

一、什么是 axios ？

Axios 是一个基于 promise 网络请求库，作用于 node.js 和浏览器中
Axios 在服务端它使用原生 node.jshttp 模块，而在客户端（浏览端）则使用 XMLHttpRequests
Axios 可以拦截请求和响应、转换请求和响应数据、取消请求、自动转换 JSON 数据
Axios 安装方式：npm install axios

---

二、Axios 的配置项

这些是创建请求时最常用的配置选项；详细的配置项请前往 Axios 官网

提示：

只有 url 是必需的；如果没有指定 method，则请求将默认使用 GET 方法

{url: '/user', // 请求的服务器地址 URL        method: 'GET', // 请求方式，默认值 GETbaseURL: 'https://some-domain.com/api/', // 如果 url 不是绝对地址，则会发送请求时在 url 前方加上 baseURLheaders: {'X-Requested-With': 'XMLHttpRequest'}, // 自定义请求头params: { ID: 12345 }, // 与请求一起发送的 URL 参数data: { firstName: 'Fred' },  // 作为请求体被发送的数据，仅适用 'PUT', 'POST', 'DELETE 和 'PATCH' 请求方法timeout: 1000, // 请求超时的毫秒数，如果请求时间超过 `timeout` 的值，则请求会被中断，默认值是 `0` (永不超时)，responseType: 'json', // 期望服务器返回的数据类型，选项包括: 'arraybuffer', 'document', 'json', 'text', 'stream'， 浏览器专属：'blob'，默认值 json// 允许在向服务器发送前，修改请求数据，它只能用于 'PUT', 'POST' 和 'PATCH' 这几个请求方法transformRequest: [function (data, headers) {   return data; // 对发送的 data 进行任意转换处理}],// 在传递给 then/catch 前，允许修改响应数据transformResponse: [function (data) {return data; // 对接收的 data 进行任意转换处理}]
}

---

三、Axios 的请求方式

为了方便起见，已经为所有支持的请求方法提供了别名

1. axios.request(config)
2. axios.get(url[, config])
3. axios.delete(url[, config])
4. axios.head(url[, config])
5. axios.options(url[, config])
6. axios.post(url[, data[, config]])
7. axios.put(url[, data[, config]])
8. axios.patch(url[, data[, config]])

注意：

在使用别名方法时，url、method、data 这些属性都不必在config中指定

// 发送一个 GET 请求
axios('/example-url/……', // 请求地址{ /* 请求体中的参数 */ },{method: 'GET', // 请求方式，可省略不写// …… 其他配置 ……}
)

// 发送一个 POST 请求
axios('/example-url/……', // 请求地址{ /* 请求体中的参数 */ },{method: 'POST ', // 请求方式// …… 其他配置 ……}
)

---

四、自定义创建实例

axios.create([config])：调用create函数传入自定义配置，来创建自定义axios实例

// src/request/axiosInstance .js
import axios from 'axios'const request = axios.create({baseURL: 'https://some-domain.com/api/',timeout: 1000,headers: {'X-Custom-Header': 'foobar'}
})export default request

使用自定义实例发送请求：

// 方法一：
import request from '@/request/axiosInstance.js'request({method: 'POST', // 请求方式url: '/example-url/……', // 请求地址// …… 其他配置 ……
})// 方法二：
import request from '@/request/axiosInstance.js'
request('/example-url/……', // 请求地址{method: 'POST', // 请求方式// …… 其他配置 ……}
)// 方法三：
import request from '@/request/axiosInstance.js'request.post('/example-url/……', // 请求地址{ /* 请求体中的参数 */ },{/* …… 其他配置 …… */}
)

---

五、Axios 请求错误处理

发送请求后，使用 .catch(error => {}) 来处理此次请求异常，请求成功发出且服务器也响应了状态码，但状态代码超出了 2xx 的范围

axios({method: 'GET', // 请求方式url: '/example-url/……', // 请求地址
}).catch(error => {console.log('请求失败！')
})

---

六、Axios 解决跨域问题

1. 跨域：指的是浏览器不能执行其他网站的脚本；它是由浏览器的同源策略造成的，是浏览器对 javascript 施加的安全限制
2. 同源策略：是指协议，域名，端口都要相同，其中有一个不同都会产生跨域
3. 浏览器为了安全问题一般都限制了跨域访问，也就是不允许跨域请求资源，如果未处理跨域访问则会在请求时控制台出现 Access-Control-Allow-Origin…… 的报错信息
4. 如何处理跨域问题，可在 vite 项目的 vite-config.js 文件中添加 proxy 代理

import { fileURLToPath, URL } from 'node:url'
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'export default defineConfig({plugins: [vue()],resolve: {alias: {'@': fileURLToPath(new URL('./src', import.meta.url))}},// 服务server: {// 代理proxy: {'/api': {target: 'https://v.api.aa1.cn/api', // 代理后台服务器地址changeOrigin: true, //允许跨域               rewrite: path => path.replace(/^\/api/,'') // 将请求地址中的 /api 替换成空}}}
})

七、Axios 请求案例

本次请求测试采用的是 APISpace 提供的测试 API ，当然如果你有自己的测试的 API 也可测试自己的 API

提示：

测试 APISpace 提供的接口需要登录其账号获取鉴权私钥，领取测试案例的使用次数方可测试

// 代理服务来解决跨域问题import { fileURLToPath, URL } from 'node:url'
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'export default defineConfig({plugins: [vue()],resolve: {alias: {'@': fileURLToPath(new URL('./src', import.meta.url))}},// 服务server: {// 代理proxy: {'/apispace': {target: 'https://eolink.o.apispace.com/', // 代理后台服务器地址changeOrigin: true, //允许跨域               rewrite: path => path.replace(/^\/apispace/,'') // 将请求地址中的 /ok 替换成空}}}
})

随机笑话大全

随机笑话大全	-	-
请求方式	POST
请求地址	https://eolink.o.apispace.com/xhdq/common/joke/getJokesByRandom
请求头	X-APISpace-Token	鉴权私钥
请求头	Authorization-Type	鉴权方式，值为：apikey
请求头	Content-Type	application/x-www-form-urlencoded
请求body参数	pageSize	获取条数（最多20条）必填，类型：String
返回数据格式	JSON
返回案例

请求测试案例：

// 选项式：
<script>
import axios from 'axios'
export default {data: () => ({count: null, // 获取条数jokes: null, // 笑话合集}),methods: {// 获取随机笑话getRandomJokes() {// 发送请求axios('/apisapce/xhdq/common/joke/getJokesByRandom', // 请求地址（已处理跨域）{method: 'POST', // 请求方式// 请求头headers: {'X-APISpace-Token': 'p6cz2g80pcplxtituz1mz3ccgkgaaxl6','Authorization-Type': 'apikey','Content-Type': 'application/x-www-form-urlencoded'},// 请求体中的参数data: { 'pageSize': this.count }}).then(response => {const responseData = response.data // 获取服务器响应的数据console.log(responseData)if (responseData.statusCode === '000000') {// 请求成功this.jokes = responseData.result} else {// 请求失败alert(responseData.desc)}}).catch(error => {alert('服务器异常')})}}
}
</script><template>获取个数：<input type="number" v-model="count"><button @click="getRandomJokes">获取随即笑话</button><hr><ul><li v-for="j in jokes" v-html="j.content"></li></ul>
</template>

// 组合式：
<script setup>
import axios from 'axios'
import { ref } from 'vue'const count = ref(null) // 获取条数const jokes = ref(null) // 笑话合集// 获取随机笑话
function getRandomJokes() {// 发送请求axios(// 请求地址（已处理跨域）'/apisapce/xhdq/common/joke/getJokesByRandom', {// 请求方式method: 'POST', // 请求头headers: {'X-APISpace-Token': 'p6cz2g80pcplxtituz1mz3ccgkgaaxl6','Authorization-Type': 'apikey','Content-Type': 'application/x-www-form-urlencoded'},// 请求体中的参数data: { 'pageSize': count.value }}).then(response => {const responseData = response.data // 获取服务器响应的数据console.log(responseData)if (responseData.statusCode === '000000') {// 请求成功jokes.value = responseData.result} else {// 请求失败alert(responseData.desc)}}).catch(error => {alert('服务器异常')})
}
</script><template>获取个数：<input type="number" v-model="count"><button @click="getRandomJokes">获取随即笑话</button><hr><ul><li v-for="j in jokes" v-html="j.content"></li></ul>
</template>

---

总结：

欢迎大家加入我的社区，在社区中会不定时发布一些精选内容：https://bbs.csdn.net/forums/db95ba6b828b43ababd4ee5e41e8d251?category=10003

---

以上就是 Vue3 中 axios 的安装及使用，不懂得也可以在评论区里问我或私聊我询问，以后会持续发布一些新的功能，敬请关注。
我的其他文章：https://blog.csdn.net/weixin_62897746?type=blog