前言：

在编写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', // 请求方式，默认值 GET
    baseURL: 'https://some-domain.com/api/', // 如果 url 不是绝对地址，则会发送请求时在 url 前方加上 baseURL
    headers: {'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>

总结：

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

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

声明：本站所有文章，如无特殊说明或标注，均为本站原创发布。任何个人或组织，在未征得本站同意时，禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益，可联系我们进行处理。

Vue3 中 axios 的安装及使用

目录

前言：

一、什么是 axios ？

二、Axios 的配置项

提示：

三、Axios 的请求方式

注意：

四、自定义创建实例

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

五、Axios 请求错误处理

六、Axios 解决跨域问题

七、Axios 请求案例

提示：

随机笑话大全

请求测试案例：

总结：

评论(0)

提示：请文明发言取消回复

排行榜展示

高考成绩总分是多少分

初中中考满分多少

高考450分很差吗

pythonname 属性的使用注意

Linux系统中tar压缩包怎么解压?

python开发俄罗斯方块小游戏代码实例

最近更新

Bootstrap 栅栏布局中 col-xs-、col-sm-、col-md-、col-lg- 区别及使用方法

HTML head 头标签详细解答

推荐几个优秀的echarts 图表网站，让你轻松搞定全部报表

移动端H5实现拍照功能的两种方法

宝塔面板FTP链接不上怎么办

用CSS样式和WordPress替换样式实现网站内容链接添加超链接图标方法

PyCharm编辑器安装requests库方法

记录Python安装wordpress_xmlrpc库实现离线发布文章

Vue3 中 axios 的安装及使用

目录

前言：

一、什么是 axios ？

二、Axios 的配置项

提示：

三、Axios 的请求方式

注意：

四、自定义创建实例

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

五、Axios 请求错误处理

六、Axios 解决跨域问题

七、Axios 请求案例

提示：

随机笑话大全

请求测试案例：

总结：

相关文章

评论(0)

提示：请文明发言 取消回复

排行榜展示

最近更新

提示：请文明发言取消回复