vue3.0 Axios如何使用

1.什么是Axios

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

2.安装Axios

Axios安装方式：npm install axios

3.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 进行任意转换处理
    }]
}

4.发送请求

可以向 axios传递相关配置来创建请求

4.1 axios(config) 一个参数

• post请求

axios({
    
    
    method: 'POST', // 请求方式
    url: '/example-url/……', // 请求地址
    // …… 其他配置 ……
})

• get请求

axios({
    
    
    method: 'GET', // 请求方式，可省略不写
    url: '/example-url/……', // 请求地址
    // …… 其他配置 ……
})

4.2 axios(url[, config]) 两个参数

• post请求

axios(
    '/example-url/……', // 请求地址
    {
    
    
        method: 'POST', // 请求方式
        // …… 其他配置 ……
    }
)

• get请求

axios(
     '/example-url/……', // 请求地址
    {
    
    
        method: 'GET', // 请求方式，可省略不写
        // …… 其他配置 ……
    }
)

4.3别名请求方式

• 为了方便起见，已经为所有支持的请求方法提供了别名
  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中指定

• post请求

axios.post(
    '/example-url/……', // 请求地址
    {
    
     /* 请求体中的参数 */ },
    {
    
     /* 其他配置 */ },
)

• get请求

axios.get(
    '/example-url/……', // 请求地址
    {
    
     /* 其他配置 */ },
)

5.自定义创建实例

• 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

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

import request from '@/request/axiosInstance.js'

// 方法一：
request({
    
    
    method: 'POST', // 请求方式
    url: '/example-url/……', // 请求地址
    // …… 其他配置 ……
})

// 方法二：
request('/example-url/……', // 请求地址
    {
    
    
        method: 'POST', // 请求方式
        // …… 其他配置 ……
    }
)

// 方法三：
request.post(
    '/example-url/……', // 请求地址
    {
    
     /* 请求体中的参数 */ },
    {
    
    /* …… 其他配置 …… */}
)

6.响应数据

发送请求后通过.then(response => {})来获取服务器响应的数据
response响应式结构：
	1. data：服务器提供的响应【最重要】
	2. status：来自服务器响应的 HTTP 状态码，成功为200，请求地址不存在为404，服务器异常为500，
	   请求方式错误为405 ……
	3. statusText：来自服务器响应的 HTTP 状态信息
	4. headers：服务器响应头
	5. config： 请求的配置信息
	6. request：生成此响应的请求，在node.js中它是最后一个ClientRequest实例，在浏览器中则是XMLHttpRequest实例

7.请求错误处理

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

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

8.解决跨域问题

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: {
    
    
            '/ok': {
    
    
                target: 'https://v.api.aa1.cn/api', // 代理后台服务器地址
                changeOrigin: true, //允许跨域               
                rewrite: path => path.replace(/^\/ok/,'') // 将请求地址中的 /ok 替换成空
            }
        }
    }
})

总结

以上就是Vue3.0 中axios的使用方法。希望本篇文章能够帮助到你，不懂得可以评论区或者私信问我，我也会一 一解答。谢谢观看！
我的其他文章:https://blog.csdn.net/m0_60970928?type=blog