03.axios数据提交和错误处理

一.axios常用请求方法和数据提交

1. 想要提交数据,先来了解什么是请求方法

  • 请求方法是一些固定单词的英文,例如:GET,POST,PUT,DELETE,PATCH(这些都是http协议规定的),每个单词对应一种对服务器资源要执行的操作

  • 前面我们获取数据其实用的就是GET请求方法,但是axios内部设置了默认请求方法就是GET,我们就没有写

  • 但是提交数据需要使用POST请求方法

2. 什么时候进行数据提交呢?

  • 例如:多端要查看同一份订单数据,或者使用同一个账号进行登录,那订单/用户名+密码,就需要保存在服务器上,随时随地进行访问

3. axios 如何提交数据到服务器呢?

js 复制代码
  axios({
    url: '目标资源地址',
    method: '请求方法',
    data: {
      参数名: 值
    }
  }).then(result => {
    // 对服务器返回的数据做后续处理
  })

二.axios 错误处理

  1. 如果注册相同的用户名,则会遇到注册失败的请求,也就是 axios 请求响应失败了,你会在控制台看到如图的错误:

2. 在 axios 语法中要如何处理呢?

因为,普通用户不会去控制台里看错误信息,我们要编写代码拿到错误并展示给用户在页面上

3. 使用 axios 的 catch 方法,捕获这次请求响应的错误并做后续处理,语法如下:

js 复制代码
axios({
  // ...请求选项
}).then(result => {
  // 处理成功数据
}).catch(error => {
  // 处理失败错误
})

小结

1. 请求方法最常用的是哪2个,分别有什么作用?

POST 提交数据,GET 查询数据

2. axios 的核心配置项?

目标资源地址,method:请求方法,params:查询参数,data:提交的数据

3. axios 如何拿到请求响应失败的信息?

复制代码
通过 axios 函数调用后,在后面接着调用 .catch 方法捕获
相关推荐
一斤代码2 小时前
vue3 下载图片(标签内容可转图)
前端·javascript·vue
中微子2 小时前
React Router 源码深度剖析解决面试中的深层次问题
前端·react.js
光影少年2 小时前
从前端转go开发的学习路线
前端·学习·golang
中微子2 小时前
React Router 面试指南:从基础到实战
前端·react.js·前端框架
3Katrina2 小时前
深入理解 useLayoutEffect:解决 UI "闪烁"问题的利器
前端·javascript·面试
前端_学习之路3 小时前
React--Fiber 架构
前端·react.js·架构
伍哥的传说4 小时前
React 实现五子棋人机对战小游戏
前端·javascript·react.js·前端框架·node.js·ecmascript·js
qq_424409194 小时前
uniapp的app项目,某个页面长时间无操作,返回首页
前端·vue.js·uni-app
我在北京coding4 小时前
element el-table渲染二维对象数组
前端·javascript·vue.js
布兰妮甜4 小时前
Vue+ElementUI聊天室开发指南
前端·javascript·vue.js·elementui