axios网络请求
2020-03-31 07:44
1171 查看
为什么选择axios?
功能特点:
- 在浏览器中发送 XMLHttpRequests 请求
- 在 node.js 中发送 http请求
- 支持 Promise API
- 拦截请求和响应
- 转换请求和响应数据
- 取消请求
- 自动转换JSON数据
支持多种请求方式:
axios(config)
axios.request(config)
axios.get(url[, config])
axios.delete(url[, config])
axios.head(url[, config])
axios.post(url[, data[, config]])
axios.put(url[, data[, config]])
axios.patch(url[, data[, config]])
安装axios
npm install axios --save
执行axios请求
axios({ url: 'http://123.207.32.32:8000/home/multidata', method: 'get' //默认get请求 }).then( res => { console.log(res); })
执行get 请求
axios.get('http://123.207.32.32:8000/api/wh/category', { params: { //参数 pramas对象 type: 'sell', page: 3 } }).then(res => { console.log(res); })
执行post 请求
axios.post('/user', { firstName: 'Fred', lastName: 'Flintstone' }) .then(function (response) { console.log(response); }) .catch(function (error) { console.log(error); });
同时发起多个请求
axios.all([ axios.get('http://123.207.32.32:8000/api/wh/category'), axios.get('http://123.207.32.32:8000/home/multidata') ]).then(axios.spread((res1, res2) => { console.log(res1); console.log(res2); }))
全局配置
在上面的示例中, 我们的BaseURL是固定的
事实上, 在开发中可能很多参数都是固定的.
这个时候我们可以进行一些抽取, 也可以利用axiox的全局配置
//提取全局配置 baseURL公共路径 axios.defaults.baseURL='http://123.207.32.32:8000'; axios.defaults.timeout = 1000 axios.all([ axios.get('api/wh/category'), axios.get('home/multidata', { params: { type:'sell', page: 1 } }) ]).then(axios.spread((res1, res2) => { console.log(res1); console.log(res2); }))
常用配置:
axios的实例
为什么要创建axios的实例呢?
当我们从axios模块中导入对象时, 使用的实例是默认的实例.
当给该实例设置一些默认配置时, 这些配置就被固定下来了.
但是后续开发中, 某些配置可能会不太一样.(比如请求服务器不是同一个)
比如某些请求需要使用特定的baseURL或者timeout或者content-Type等.
这个时候, 我们就可以创建新的实例, 并且传入属于该实例的配置信息.
//创建实例 const instans1 = axios.create({ baseURL: 'http://123.207.32.32:8000', timeout: 5000 }) //发送网络请求 instans1({ url: 'home/multidata', method: 'get', params: { type:'sell', page: 1 } }).then(res => { console.log(res); })
axios封装
在src文件下单独创建文件夹network用于存放请求数据方面配置,创建axios.js文件进行封装
//引入 axios框架 import axios from 'axios' // 导出 request 方法 export function request(config) { // return new Promise((resolve, reject) => { // // 创建axios实例 // const instance1 = axios.create({ // baseURL: 'http://123.207.32.32:8000', // timeout: 5000 // }) // //请求数据 // instance1(config).then(res => { // resolve(res) // }).catch(error => { // reject(error) // }) // }) //简写: //创建axios实例 const instance1 = axios.create({ baseURL: 'http://123.207.32.32:8000', timeout: 5000 }) //请求数据 return instance1(config) // 使用实例时返回的数据就是一个promis.只需要把instance1(config)返回即可 }
组件调用
created() { request({ url: 'home/multidata', parmas: { type: 'sell', page: 1 }, method: 'get' }).then(res => { console.log(res); }).catch(err => { console.log(err); }) },
axios拦截器
axios提供了拦截器,用于我们在发送每次请求或者得到相应后,进行对应的处理。
如何使用拦截器呢?
- 发送请求时拦截
// 1.数据请求时拦截 instance1.interceptors.request.use(config => { console.log(config); console.log('来到了request拦截success中'); // 数据拦截应用: // 1.比如config中有些数据不符合服务器要求 // 2.每次发送请求时,希望在界面显示一个请求中的状态图标 // 3.某些网络请求(如登录token),必须携带一些特殊信息 return config //拦截修改后返回数据(放行) }, err => { console.log(err); console.log('来到了request拦截err中'); return err })
- 响应数据时拦截
响应的成功拦截中,主要是对数据进行过滤。
// 2.响应拦截 instance1.interceptors.response.use(res => { console.log(res); console.log('来到了response拦截success中'); return res.data //数据处理 }, err => { console.log(err); console.log('来到response拦截’error中'); return err.data })
响应的失败拦截中,可以根据status判断报错的错误码,跳转到不同的错误提示页面。
console.log('来到response拦截’error中'); if(err && err.response) { switch(err.response.status) { case 400: err.message = '请求错误'; break; case 401: err.message = "未经授权"; break; } } return err.data })
- 点赞
- 收藏
- 分享
- 文章举报
相关文章推荐
- vue - axios (网络请求)
- 使用axios优雅的发起网络请求
- VUE网络请求中的axios
- 前后端分离2:使用axios做网络请求
- node.js通过axios实现网络请求
- node.js通过axios实现网络请求的方法
- IOS开发指南学习——使用MKNetworkKit进行网络请求
- HttpUtil---网络请求工具类
- Vue的axios插件实现GET、POST、JSONP请求,以及请求拦截
- Android 网络请求框架Retrofit2.0使用笔记
- swift 面向协议的网络请求封装
- java---网络请求
- 网络协议学习之一:网络请求是如何发出
- Linux网络编程一步一步学-接受客户端连接请求
- Android 网络请求框架Retrofit
- Android网络请求 上传文件 和 下载文件 断点下载
- 使用Retrofit进行网络请求
- Android 使用RxJava+Retrofit +Realm 组合加载数据 <读取缓存 显示 请求网络数据 缓存最新数据 更新界面>(二)
- 【Android】Retrofit网络请求参数注解,@Path、@Query、@QueryMap...
- 打造属于自己的网络请求框架(OKHttp+Retrofit+RxJava)