uniapp vue3 使用axios
时间: 2023-10-31 20:23:40 浏览: 177
Uniapp 支持使用 axios 进行网络请求,步骤如下:
1. 安装 axios:在终端中输入 `npm install axios` 或者 `yarn add axios` 进行安装。
2. 在 `main.js` 中引入 axios:
```
import axios from 'axios'
Vue.prototype.$axios = axios
```
3. 在需要使用 axios 的页面中,可以通过 `this.$axios` 来调用 axios。
例如,在一个组件中,可以这样使用 axios 发送 GET 请求:
```
this.$axios.get('/api/getData')
.then(res => {
console.log(res.data)
})
.catch(err => {
console.log(err)
})
```
同样的,也可以发送 POST 请求:
```
this.$axios.post('/api/postData', { name: 'John', age: 30 })
.then(res => {
console.log(res.data)
})
.catch(err => {
console.log(err)
})
```
需要注意的是,在使用 axios 发送请求时,需要配置请求的基础路径:
```
// 在 main.js 中配置
axios.defaults.baseURL = 'https://api.example.com'
// 或者在每个请求中单独配置
this.$axios.get('/api/getData', { baseURL: 'https://api.example.com' })
```
另外,如果需要在请求中设置请求头或者其他配置,可以在请求中传递一个配置对象:
```
this.$axios.get('/api/getData', {
headers: {
'Authorization': 'Bearer ' + token
},
params: {
page: 1,
perPage: 10
}
})
```
以上就是在 Uniapp 中使用 axios 进行网络请求的基本步骤。
阅读全文