接口调用:axios 的用法和async/await用法

6,686 阅读2分钟

一、基本用法

二、常用API

三、get 传参

3.1 GET 第一种传参:url地址? =

3.2 GET 第二种传参:/直接加参数

3.3 GET 第三种传参:(对象)包裹传参

四、 DELETE传递参数

注意:前端用params传参 后台用的是query接收

五.post传参

5.1 post第一种传参方式:json格式 { 数据}

5.2 post第二种传参方式:传统表单形式

六、put请求

put 和 post 请求类似 也可以使用传统的表单形式传参 或者 json格式传 (后台支持json)

七.响应结果与全局配置

八、拦截器

8.1 发送拦截器

在没有发送之前 加了一个请求头

8.2 响应拦截器

九、接口调用 :async/await用法

为什么用这个? 因为promise(解决了回到地狱)但是发送多个异步的请求 要保证他们的顺序 要对then进行链式的操作 这样在代码层面上是不够简洁的 为了提高编程的体验 就诞生了 新的语法async/await

9.1 获取单个异步请求

ret.data就可以拿到 hello axios 但是 返回的是ret 外边输出的也是 ret (data包装对象) 不是我们要的data 所以外面就得输出得改成ret.data

把结果返回出去 给到Promise实例对象中 注意小细节:async函数的返回值是Promise实例对象

所以 .then()可以拿到data

await 后跟的可以是Promise 实例对象 比如:下面 new Promise() then是得到promise对象的返回值的

也就是说不通过then 用async/await的方式 await 拿到异步结果 拿到我们需要的数据 也可以在async/await 函数中不输出 return 一个值 (promise实例对象) 在调用queryData函数是用.then (拿到reslove中(data))拿到我们要的数据!!!

最后总结:

return 返回的是Promise 实例对象 实例对象中不是有参数 成功(reslove)和失败(reject) 可以这样理解 reslove(ret) reslove(ret.data) 所以:

  • return ret 就是返回这个 reslove(ret) 给then(data)打印 (包装的data)
  • return ret.data 就是返回这个 reslove(ret.data) 给then(data)打印我们要的

9.2 获取多个异步请求

如果上面改为hello1 不成立 就输出error 就不用排顺序了!