Vue 网络请求模块封装 (axios)
1. vue 中如何发送网络请求 ?
选择一: XMLHttpRequest (XHR)
这种方式配置和调用方式都非常混乱,编码也很复杂,所以真实开发中都不会使用 XHR 这种方式
选择二: jQuery-Ajax
如果项目中使用了的 jquery,那么我们一般都会使用 jquery 自带的 ajax 封装,也就是 $.ajax({})
但是,要明确一点,在 vue 整个开发中都是不需要使用 jQuery 了,如果在 vue 中还要使用 $.ajax 则使用引入 jquery。jquery 的代码达到 1w+ 行,vue 代码才 1w+ 行,完全没有必要为了网络请求引用这个重量级框架
选择三: axios
在 Vue1.x 的时候,Vue 官方推出了 vue-resource,它的体积相对于 jquery 小了很多,在 Vue2.x 推出后,去掉了 vue-resource,并且 vue 作者尤雨溪推荐使用 axios
2. 在 vue 脚手架中使用 axios
axios 中文文档: http://www.axios-js.com
安装 axios 包
npm install axios
在 main.js 中导入 axios
import axios from 'axios';
3. 请求配置
当 url 不是一个绝对 URL 时,baseURL 才会自动加在 url 前面
序号 | 参数 | 描述 |
---|---|---|
1 | url | 接口地址 |
2 | baseURL | 接口根路径 |
3 | method | 请求类型,不区分大小写 |
4 | params | URL 查询对象 |
5 | data | 请求体数据,存放 POST 数据的地方 |
6 | headers | 请求头 |
7 | timeout | 超时时间,单位: 毫秒,请求超过时间时请求将被中断 (0 代表 不超时) |
常用请求配置参数
axios({
url: "/goods/getLists",
method: "post",
baseURL: "http://shop.cy",
params: {
id: 10
},
data: {
name: 'liang'
},
headers: {
token: "abcdef"
},
timeout: 5000
})
4. 配置默认值
全局的 axios 默认值
axios.defaults.baseURL = 'https://api.example.com';
axios.defaults.timeout = 5000;
自定义实例默认值
当前接口地址是多个域名时,定义全局配置默认值显然是不合适的,因为接口前缀不同,此时可以定义多个 axios 实例
// 创建 axios 实例
const instance = axios.create({
baseURL: "http://shop.cy",
timeout: 500
})
// 发送网络请求
instance(config).then(res => {
console.log('res', res)
})
5. 网络请求模块封装
创建文件: src/network/request.js
import axios from 'axios';
export default (config) => {
// 创建 axios 实例
const instance = axios.create({
baseURL: "http://shop.cy",
timeout: 1
})
// 响应拦截器
instance.interceptors.response.use(response => {
// 响应成功
return response.data; // 返回接口数据
}, error => {
// 响应错误
return Promise.reject(error);
});
return instance(config)
};
使用示例
request({
url: '/test/req',
params: {
id: 200
}
}).then(res => {
console.log('res', res)
}).catch(err => {
console.log('err', err)
})
相关文章
- Android 主题theme说明 摘记
- Android开发 去掉标题栏方法 摘记
- vue中全局引入bootstrap.css
- 微搭低代码xChatGPT,五步搭建AI聊天机器人小程序
- 微信开放平台之第三方平台开发,模板小程序如何提交?
- 尝试Capacitor(Vue+Android)混合开发
- 小程序|炎炎夏日、清爽一夏、头像大换装
- Mac下安装NDK(android开发)
- textview设置字体大小-Android应用开发之TextView设置个别字体样式
- java小程序微信支付与提现
- iphone没有sim卡能用吗-升级ios15无sim卡怎么办
- MacDroid for mac(安卓设备文件传输助手) v1.6.1中文版
- 使用JQuery和bootstrap-select实现世界城市的三级联动(中英互译)
- AnyMP4 iOS Cleaner for mac(IOS文件清理工具)v1.0.16激活版
- 药物互助小程序的120个小时
- Android平台GB28181设备接入端如何实时更新经纬度实现国标平台侧电子地图位置标注
- Android 子线程 UI 操作真的不可以?
- 移动安全-安卓frida hook基础篇
- 微信开放Donut,我们的App也能像微信跑小程序了
- Android Activity Deeplink启动来源获取源码分析