Vue3中使用axios_vue3 axios

什么是axios

axios是一个基于Promise的HTTP请求库，它可以在浏览器和Node.js中使用。axios的功能非常请打，支持Promise API、可以拦截请求和响应、可以转换请求和响应数据、支持取消请求、可以自动转换JSON数据等。

axios安装与基本使用

安装axios

使用npm 或 yarn 安装axios到项目中

// 使用npm 安装
npm install axios
//或者 使用yarn 安装
yarn add axios
1
2
3
4

局部引入axios

axios的使用非常简单，如果只想在单个组件中使用axios，只需要在这个文件中引入axios，然后就可以直接使用了

import axios from 'axios'
onMounted(() => {
    getData()
})
const getData = async ()=>{
  const response = await axios.get('/hangzhou.json')
  console.log(response.data.features);  
}
1
2
3
4
5
6
7
8

全局引入axios

如果想要全局引入axios，我们可以借助 vue 提供的 provide 和 inject 方法来实现

在main.js中使用 provide 方法 注入axios，代码如下

import { createApp } from 'vue'
import App from './App.vue'
import axios from 'axios'

const app = createApp(App)
app.provide('$axios',axios)
app.mount('#app')
1
2
3
4
5
6
7

在需要使用axios的页面使用 inject 方法调用即可

const axios = inject('$axios')
const response = await axios.get('/hangzhou.json')
console.log(response.data.features);
1
2
3

运行程序，在浏览器控制台可以看到两种方法都可以拿到数据

axios常用的API

1. get(url[, config])

发送get请求。url是请求的url，config是可选的配置对象，用于设置请求的各种选项，如请求头和超时时间。返回一个Promise对象，响应结果包含在其中。

2. delete(url[, config])

发送delete请求。url是请求的url，config是可选的配置对象，用于设置请求的各种选项，如请求头和超时时间。返回一个Promise对象，响应结果包含在其中。

3. head(url[, config])

发送head请求。url是请求的url，config是可选的配置对象，用于设置请求的各种选项，如请求头和超时时间。返回一个Promise对象，响应结果包含在其中。

4. options(url[, config])

发送options请求。url是请求的url，config是可选的配置对象，用于设置请求的各种选项，如请求头和超时时间。返回一个Promise对象，响应结果包含在其中。

5. post(url[, data[, config]])

发送post请求。url是请求的url，data是请求的数据，config是可选的配置对象，用于设置请求的各种选项，如请求头和超时时间。返回一个Promise对象，响应结果包含在其中。

6. put(url[, data[, config]])

发送put请求。url是请求的url，data是请求的数据，config是可选的配置对象，用于设置请求的各种选项，如请求头和超时时间。返回一个Promise对象，响应结果包含在其中。

7. patch(url[, data[, config]])

发送patch请求。url是请求的url，data是请求的数据，config是可选的配置对象，用于设置请求的各种选项，如请求头和超时时间。返回一个Promise对象，响应结果包含在其中。

8. request(config)

发送自定义请求。config是请求的配置对象，包含请求的各种选项，如请求url、方法、数据、请求头等。返回一个Promise对象，响应结果包含在其中。

axios 常用的请求配置项

• url (类型: string, 必填): HTTP 请求的服务器地址
• method (类型: string, 默认: get): HTTP 请求方法
• data (类型: Object, Array): 要发送的数据
• params (类型: Object): 作为查询字符串添加到请求 URL 中的参数, 用于 GET, HEAD 和 DELETE 请求。
• headers (类型: Object): HTTP 请求的头部信息
• timeout (类型: number): 请求超时时间，单位为毫秒，默认为 0，即没有超时时间。
• responseType (类型: string): 响应数据的格式, 默认是 `json
• transformRequest (类型: Function): 对请求数据进行任意转换函数，函数接受传递的参数为请求核心对象
• transformResponse (类型: Function): 对响应数据进行任意转换函数，函数接受传递的参数为响应核心对象
• validateStatus (类型: Function): 定义对于给定的 HTTP 响应状态码是 resolve 或 reject promise ;如果 validateStatus 返回 true (或者设置为 null 或undefined)， 则promise 将会 resolved，否则是 rejected。

get的调用示例

简单调用

axios.get('/api/data')
  .then(function (response) {
    console.log(response);
  })
  .catch(function (error) {
    console.log(error);
  });
1
2
3
4
5
6
7

完整调用

axios({
  method: 'get',
  url: '/api/data',
  params: {
    id: 123
  }
})
.then(function (response) {
  console.log(response);
})
.catch(function (error) {
  console.log(error);
});
1
2
3
4
5
6
7
8
9
10
11
12
13

post的调用示例

简单调用

axios.post('/api/data', { name: 'John', age: 30 })
  .then(function (response) {
    console.log(response);
  })
  .catch(function (error) {
    console.log(error);
  });
1
2
3
4
5
6
7

完整调用

axios({
  method: 'post',
  url: '/api/data',
  data: {
    name: 'John',
    age: 30
  }
})
.then(function (response) {
  console.log(response);
})
.catch(function (error) {
  console.log(error);
});
1
2
3
4
5
6
7
8
9
10
11
12
13
14

axios的拦截器

拦截器是axios提供的一种强大的机制，用于在请求或响应被处理之前对其进行拦截和转换。在axios的全局配置中，可以配置请求拦截器和响应拦截器。请求拦截器可以用于在发送请求之前对请求进行修改、添加请求头等操作，而响应拦截器可以用于在收到响应后对响应进行修改、数据转换、错误处理等操作。

请求拦截器的使用方法：

// 添加请求拦截器
axios.interceptors.request.use(function (config) {
    // 在发送请求之前做些什么，比如添加请求头等操作
    return config;
  }, function (error) {
    // 对请求错误做些什么
    return Promise.reject(error);
  }); 
1
2
3
4
5
6
7
8

如果我们有需要移除拦截器的情况，可以将请求拦截器存入一个变量中，在不需要使用的时候，调用request.eject方法，代码如下：

const myInterceptor = axios.interceptors.request.use(function () {/*...*/});
axios.interceptors.request.eject(myInterceptor);
1
2

响应拦截器的使用方法：

// 添加响应拦截器
axios.interceptors.response.use(function (response) {
    // 对响应数据做点什么
    return response;
  }, function (error) {
    // 对响应错误做点什么
    return Promise.reject(error);
  });  
1
2
3
4
5
6
7
8

和请求拦截器一样，如果我们有需要移除拦截器的情况，可以将响应拦截器存入一个变量中，在不需要使用的时候，调用request.eject方法，代码如下：

  // 在需要移除响应拦截器时
const myInterceptor = axios.interceptors.response.use(function () {/*...*/});
axios.interceptors.response.eject(myInterceptor);
1
2
3

Vue3中对axios的封装

在我们实际开发项目时，一个项目往往会涉及到很多接口，如果我们按照上面的方法去调用网络请求的话，每次都要去写一遍上面的方法，这将是一件非常恐怖的事情，后期如果需求有变更，比如url地址变了，那我们的工作量就是成倍的增加了。所以，在实际的开发中，我们都会将axios进行封装；我在实际的开发中会将网络相关的业务独立放到一个文件夹中，创建两个文件，一个是request.js文件用于封装 axios 请求；一个是api.js文件用于封装所有的 API 请求。详细步骤如下

1. 在src文件夹下新建http文件夹，在http文件夹新建request.js文件和api.js文件
2. 在request.js中引入axios，并封装 axios 请求，代码如下：

import axios from 'axios'

const service = axios.create({
  baseURL: process.env.VUE_APP_BASE_API,
  timeout: 5000
})

// 请求拦截器
service.interceptors.request.use(
  config => {
    // 添加请求头等前置处理
    config.headers['Authorization'] = 'Bearer' + ' ' + localStorage.getItem('token')
    return config
  },
  error => {
    // 请求错误处理
    console.log('Request Error:', error)
    return Promise.reject(error)
  }
)

// 响应拦截器
service.interceptors.response.use(
  response => {
    // 响应后处理
    if (response.status === 200 && response.data.code === 200) {
      return Promise.resolve(response.data.data)
    } else {
      return Promise.reject(response.data)
    }
  },
  error => {
    console.log('Response Error:', error)
    return Promise.reject(error)
  }
)

export default service
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38

上面的axios封装中，我在请求拦截器中添加了一个前置处理，将请求头中添加了一个 Authorization 参数，用于后端 token 权限控制。在响应拦截器中添加了一个后置处理，对返回结果进行解析和处理，如果返回结果成功（code 为 200）则返回处理后的数据，否则返回处理后的错误信息。

3. 在api.js中引入上面封装好的request.js文件，并封装所有的 API 请求，代码如下：

import request from './request'

// 用户登录
export function login(data) {
  return request({
    url: '/login',
    method: 'post',
    data
  })
}
// 获取用户信息
export function getUserInfo() {
  return request({
    url: '/user/info',
    method: 'get'
  })
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

4. 在组件中使用：在组件中，我们只需要引入api.js文件，并将需要使用的函数解构出来使用就可以了，代码如下：

import { login,getUserInfo } from './http/api'
const username = ref('')
const password = ref('')
const res = await login({ username: username.value, password: password.value })
console.log(res);
1
2
3
4
5

跨域问题

所谓跨域，指的是在客户端（浏览器）发起请求时，请求的目标资源位于另一个域名/端口/协议上，就是跨域。在跨域场景下，浏览器为了保护用户隐私和安全，通常会限制页面在未经允许的情况下访问跨域的资源。常见的跨域场景包括：

1. 不同域名之间的跨域访问（如 www.example.com 访问 api.example.com）
2. 同一服务器使用不同端口号（如 80 和 8080）的跨域访问
3. HTTP 和 HTTPS 之间的跨域访问
4. 不同域名之间使用不同的协议（如 http 和 https）的跨域访问

跨域访问的实现需要符合同源策略（Same-Origin Policy），即只允许源（协议、域名、端口）相同的网页脚本进行交互操作，否则浏览器会阻止跨域操作，保护用户安全。在跨域的情况下，通常可以通过一些手段来解决，如 CORS（跨域资源共享）等。

在Vue3中遇到跨域问题时，可以通过在vite.config.js中进行配置来解决。需要在vite.config.js中添加proxy选项，如下所示：

// vite.config.js
export default {
  server: {
    proxy: {
      // 在此处为需要解决跨域的 API 配置代理
      '/api': {
        target: 'http://localhost:3000',
        changeOrigin: true,
        rewrite: path => path.replace(/^\/api/, '') // 去掉 /api 前缀
      }
    }
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13

上面的配置中，我将需要解决跨域的 API 的前缀设置为了 /api，然后通过 proxy 声明了一个代理规则，将包含 /api 前缀的请求转发到本地的 3000 端口，实现解决跨域的效果。其中，changeOrigin 设置为 true 表示修改请求头中的 Origin 字段为代理服务的地址，避免浏览器发送请求时出现跨域问题，rewrite 方法用于去掉请求中的 /api 前缀

然后在我上面封装的api.js中，在每个url前加上/api前缀，就可以了

// 获取用户信息
export function getUserInfo() {
  return request({
    url: '/api/user/info',
    method: 'get'
  })
}
1
2
3
4
5
6
7

好了，关于vue3中使用axios的内容就到这里吧，喜欢的小伙伴点赞关注加收藏哦！