axios和async / await的基本用法

时间：2025-04-03 09:09:48

文章目录

    • ???? 一、axios 的基本用法
      • ???? 1、基本语法：
      • ???? 2、axios 的参数传递
      • ???? 3、 axios 的响应结果
      • ???? 4、axios 的全局配置
      • ???? 5、axios拦截器配置
      • ???? 6、使用axios的请求示例【用于JSON类请求】
      • ???? 7、使用axios的请求示例【用于文件上传或下载】
    • ???? 二、async/await 的基本用法
      • ???? 1、下面演示的代码是关于async和await在前端使用axios请求的方法示例
      • ???? 2、async/await 处理多个异步请求

???? 一、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

???? 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 的全局配置

  • = 3000; // 超时时间为3秒
  • = ‘http://localhost:3000/app’;
    // 基准请求地址为：http://localhost:3000/app
  • [‘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/"

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}`
        // ();
    }
  } 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";
import {
  Message,
  Loading
} from 'element-ui'
const request = axios.create({
  baseURL: "/api",
  timeout: 0, //关闭超时时间
});
let loading = null;
request.interceptors.request.use((config) => {
  config.headers['Authorization'] = 'Bearer  ' + localStorage.getItem("token") //携带的请求头
  config.headers['X-CSRFToken'] = localStorage.getItem("csrftoken")
  if (config.method === 'get') { //如果需要返回类型是二进制类型，需要使用get方式进行请求
    config.responseType = 'blob';
  }
  loading = Loading.service({
    lock: true,
    text: '正在加载，请稍候...',
    spinner: 'el-icon-loading',
    background: 'rgba(0, 0, 0, 0.3)'
  })
  return config;
});
request.interceptors.response.use(
  (response) => {
    let res = response.data;
    if (loading) {
      loading.close()
    }
    const contentType = response.headers['content-type'];
    if (contentType === 'text/-excel') {
      let blob = new Blob([res], {
        type: "application/" //文件下载以及上传类型为 .xlsx
      });
      let url = window.URL.createObjectURL(blob);
      // 创建一个链接元素
      let link = document.createElement('a');
      link.href = url;
      link.download = 'excel数据.xlsx'; // 自定义文件名
      link.click();
    } else {
      return response.data
    }


  },
  (err) => {
    Message({
      message: '操作失败',
      type: 'error',
    })
    console.error(err);
    if (loading) {

      loading.close()
    }
  }
);



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)
})

相关文章