uniapp 封装axios
时间: 2023-08-31 11:05:06 浏览: 151
Uniapp是基于Vue.js框架开发的跨平台应用开发框架,可以用来开发各种类型的应用程序。在Uniapp中,我们可以使用Axios来进行网络请求,Axios是一个基于Promise的HTTP客户端,可以在浏览器和Node.js中用于发送HTTP请求。
下面是封装Axios的步骤:
1. 在Uniapp中安装Axios:在命令行中使用npm install axios命令来安装Axios。
2. 在Uniapp项目中创建一个api.js文件:这个文件用于封装Axios,并且定义一些常用的API接口。
3. 在api.js文件中引入Axios:在api.js文件中使用import axios from 'axios'来引入Axios。
4. 封装Axios:在api.js文件中封装Axios,定义一些常用的请求方法,如get、post、put、delete等。
下面是一个简单的封装Axios的例子:
```
import axios from 'axios'
const service = axios.create({
baseURL: 'http://localhost:3000/api', // API请求的默认地址
timeout: 5000 // 请求超时时间
})
// 请求拦截器
service.interceptors.request.use(
config => {
// 在请求发送之前可以做一些处理,如添加token等
return config
},
error => {
// 处理请求错误
console.log(error)
return Promise.reject(error)
}
)
// 响应拦截器
service.interceptors.response.use(
response => {
// 在响应返回之前可以做一些处理,如判断响应结果的状态码等
return response.data
},
error => {
// 处理响应错误
console.log(error)
return Promise.reject(error)
}
)
export default {
get(url, params) {
return service({
method: 'get',
url,
params
})
},
post(url, data) {
return service({
method: 'post',
url,
data
})
},
put(url, data) {
return service({
method: 'put',
url,
data
})
},
delete(url, params) {
return service({
method: 'delete',
url,
params
})
}
}
```
在上面的代码中,我们首先使用axios.create方法创建了一个axios实例,并且定义了一些默认的请求参数,如请求的地址和请求超时时间。然后我们使用拦截器对请求和响应进行了处理,可以在请求发送之前和响应返回之前添加一些处理逻辑,比如添加token、判断状态码等。最后我们定义了一些常用的请求方法,如get、post、put、delete等,这些方法都是基于我们创建的axios实例来发送请求的。
使用封装好的Axios来发送请求非常简单,只需要在组件中引入api.js文件,然后使用封装好的方法即可,如下面的例子:
```
import api from '@/api'
export default {
created() {
// 发送get请求
api.get('/list', { page: 1, size: 10 }).then(res => {
console.log(res)
})
// 发送post请求
api.post('/login', { username: 'admin', password: '123456' }).then(res => {
console.log(res)
})
}
}
```
在上面的代码中,我们首先引入了api.js文件,并且使用api.get和api.post方法来发送get和post请求,分别传递了请求的地址和请求参数。发送请求后,我们可以通过then方法来处理响应结果。
阅读全文
相关推荐
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)