axios和async / await的基本用法
async 用法 基本 Axios await
2023-09-11 14:19:18 时间
文章目录
🍕 一、axios 的基本用法
🍔 1、基本语法:
axios.get('/请求地址')
.then(ret=>{ //正确返回
// data属性名称是固定的,用于获取后台响应的数据
console.log(ret.data)
}).catch(err =>{ //错误捕获
console.error(err)
}).finall(){
console.log("finally")
}
axios返回的数据是一个Promise实例对象,
用 .then()取到正确的数据,
.catch()捕获错误,
另外还会跟一个.finally()表示无论成功得到数据还是发生错误都会执行的法。
为了我们的代码健壮性,因此本质上只要有.then()就得跟一个.catch(),至于finally()则看情况添加。
下面的示例中为了节省时间,所以基本没写,
但是希望大家能养成这样习惯,有 .then()就有.catch(),
当然实际的开发项目中,如果我们使用了统一的请求模块,
这个时候我们可以直接使用 新增的语法糖 async 和await ,使用起来更加的舒服方便,代码看起来也更简洁
1.1 axios 的常用API
- get : 查询数据
- post : 添加数据
- put : 修改数据
- delete:删除数据
- axios.create():配置自定义的axios
🍟 2、axios 的参数传递
2.1、 GET传递参数
- 通过 URL 传递参数
- 通过 params 选项传递
axios.get('/adata?id=123')
.then(ret=>{
console.log(ret.data)
})
axios.get('/adata/123')
.then(ret=>{
console.log(ret.data)
})
axios.get('/adata',{
params: {
id: 123
}
})
.then(ret=>{
console.log(ret.data)
})
2. 2、DELETE传递参数
l 参数传递方式与GET方式类似
axios.delete('/adata?id=123')
.then(ret=>{
console.log(ret.data)
})
axios.delete('/adata/123')
.then(ret=>{
console.log(ret.data)
})
axios.delete('/adata',{
params: {
id: 123
}
})
.then(ret=>{
console.log(ret.data)
})
2.3、 POST传递参数
- 通过选项传递参数(默认传递的是 json 格式的数据)
axios.post('/adata',{
uname: 'tom',
pwd: 123
}).then(ret=>{
console.log(ret.data)
})
- 通过 URLSearchParams 传递参数(application/x-www-form-urlencoded)
const params = new URLSearchParams();
params.append('param1', 'value1');
params.append('param2', 'value2');
axios.post('/api/test', params).then(ret=>{
console.log(ret.data)
})
2.4、 PUT传递参数
- 参数传递方式与POST类
axios.put('/adata/123',{
uname: 'tom',
pwd: 123
}).then(ret=>{
console.log(ret.data)
})
🌭 3、 axios 的响应结果
3.1、响应结果的主要属性
- . data : 实际响应回来的数据
- . headers :响应头信息
- . status :响应状态码
- . statusText :状态文本信息
🍿 4、axios 的全局配置
- axios.defaults.timeout = 3000; // 超时时间为3秒
- axios.defaults.baseURL = ‘http://localhost:3000/app’;
// 基准请求地址为:http://localhost:3000/app - axios.defaults.headers[‘mytoken’] = ‘hello’
// 设置请求头其中的mytoken是跨域请求头的参数,可以自己更改,但是需要和后台JS中的路由文件中的headers 参数一致,后面的hello属于请求头中mytoken的参数,同样的,也是可以修改的
🧂 5、axios拦截器配置
5.1、 请求拦截器
在请求发出之前设置一些信息
//添加一个请求拦截器
axios.interceptors.request.use(function(config){
//在请求发出之前进行一些信息设置
return config;
},function(err){
// 处理响应的错误信息
});
5.2.、响应拦截器
在获取数据之前对数据做一些加工处理
//添加一个响应拦截器
axios.interceptors.response.use(function(res){
//在这里对返回的数据进行处理
return res;
},function(err){
// 处理响应的错误信息
})
🥓 6、使用axios的请求示例【用于JSON类请求】
说明:主要使用本地自建的cookie工具或者vue提供的vue-cookie以及element-ui框架和nprogress进度条模块,大家可以对照自己代码直接复制使用
import axios from 'axios'
import cookie from 'vue-cookie'
//import cookieUntil from '../assets/js/cookieUtil'
import {Loading,Message} from 'element-ui';
import nProgress from 'nprogress'
import "nprogress/nprogress.css"
const service = axios.create({
baseURL: '/api', // 公共接口
timeout: 10 * 1000, // 超时时间设置10秒
headers: {
token: cookie.get('cookieName')
}
})
// 2.请求拦截器
let loading = null
service.interceptors.request.use(config => {
config.data = JSON.stringify(config.data) // 请求数据转化
nProgress.start()
loading = Loading.service({
lock: true,
text: 'Loading...',
background: 'rgba(0, 0, 0, 0.5)',
});
config.headers = {
'Content-Type': 'application/json', // 配置请求头
}
return config
}, error => {
Promise.reject(error)
})
// 3.响应拦截器
service.interceptors.response.use(response => {
const res = response.data
if (res.code === 200) {
loading.close()
nProgress.done()
return res
}
}, error => {
// 错误信息处理
if (error && error.response) {
switch (error.response.status) {
case 400:
error.message = '错误请求'
break
case 401:
error.message = '未授权,请重新登录'
break
case 403:
error.message = '拒绝访问'
break
case 404:
error.message = '请求错误,未找到该资源'
break
case 405:
error.message = '请求方法未允许'
break
case 408:
error.message = '请求超时'
break
case 500:
error.message = '服务器端出错'
break
case 501:
error.message = '网络未实现'
break
case 502:
error.message = '网络错误'
break
case 503:
error.message = '服务不可用'
break
case 504:
error.message = '网络超时'
break
case 505:
error.message = 'http版本不支持该请求'
break
default:
error.message = `连接错误${error.response.status}`
// ElementPlus.Message.error(error.message);
}
} else {
// 超时处理
if (JSON.stringify(error).includes('timeout')) {
Message({
message: '服务器响应超时,请刷新当前页。错误原因:' + error.message,
type: 'error',
})
}
error.message = '连接服务器失败'
}
Message({
message: error.message,
type: 'error',
})
loading.close()
nProgress.done()
return Promise.resolve(error.response)
})
// 4.导入文件
export default service
🥓 7、使用axios的请求示例【用于文件上传或下载】
import axios from "axios";
const request = axios.create({
baseURL: "/api",
timeout: 6000,
});
request.interceptors.request.use((config) => {
config.headers['token'] = localStorage.getItem('token') //需要携带token下载文件,可以在这里设置
config.responseType = 'blob'
return config;
});
request.interceptors.response.use(
(response) => {
let res = response.data;
let blob = new Blob([res], {
type: "application/vnd.ms-excel" //文件下载以及上传类型为excel
});
let url = window.URL.createObjectURL(blob);
window.location.href = url;
},
(err) => {
console.error(err);
}
);
export default request;
🧇 二、async/await 的基本用法
- async和await是ES8引入的新语法,准确说来是异步函数实现的语法糖,使用async和await可以更加方便的进行异步操作
- async 关键字用于函数上(async函数的返回值是Promise实例对象)
- await 关键字用于 async 函数当中(await可以得到异步的结果)
🥞 1、下面演示的代码是关于async和await在前端使用axios请求的方法示例
async function queryData(id) {
const ret = await axios.get('/请求地址');// await 后面也可以跟的是Promise实例对象
return ret;
}
queryData.then(ret=>{
console.log(ret)
})
🍞 2、async/await 处理多个异步请求
多个异步请求的场景
async function queryData(id) {
const info = await axios.get('/async1');
const ret = await axios.get('async2?info=' + info.data);
return ret;
}
queryData.then(ret=>{
console.log(ret)
})
相关文章
- [转] 以 async/await 为例,说明 babel 插件怎么搭
- C# Under the Hood: async/await (Marko Papic)
- 【学习笔记72】 Promise和async 与 await
- 在vue中使用async/await遇到的坑
- springboot @EnableAsync 异步,springboot @Async不生效
- 协程 和 async await
- 【ES8(2017)】async / await
- async 函数 让方法链式调用 新用法
- 一个真实的Async/Await示例
- c# 并行循环支持 async
- async与await是什么?async和await基本用法
- C#多线程和异步(二)——Task和async/await详解
- C#-深入理解async和await的作用及各种适用场景和用法