当前位置：首页 > news >正文

Vue3 中 axios 的安装及使用

news 2025/7/20 1:24:20

前言：

在编写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 的请求方式

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

axios.request(config)
axios.get(url[, config])
axios.delete(url[, config])
axios.head(url[, config])
axios.options(url[, config])
axios.post(url[, data[, config]])
axios.put(url[, data[, config]])
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 解决跨域问题

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