使用async await 封装 axios的方法

下面是使用async/await封装axios的方法的完整攻略：

1. 前置要求

在使用async/await封装axios之前，需要先了解以下内容：

• Promise机制
• axios的基本使用方法和API
• async/await用法

2. 封装axios

封装axios的目的是为了方便在多个地方使用相同的网络请求配置和错误处理，避免重复书写。下面是一个简单的封装axios的方法：

import axios from 'axios'

export const request = async (config) => {
  try {
    const response = await axios(config)
    return response.data
  } catch (error) {
    console.error(error)
    throw error
  }
}

代码解析：

• 通过import引入axios模块。
• 将axios封装为一个异步函数request，接受一个配置对象config作为参数。
• 在try语句中，使用await关键字发送网络请求，并将返回的响应数据response解构得到，返回data属性值。
• 在catch语句中，捕获错误对象error，并输出到控制台中，再次抛出错误对象。

3. 示例说明

3.1 发送GET请求

使用封装的axios发送GET请求示例：

import { request } from './request.js'

async function fetchData() {
  try {
    const data = await request({
      url: 'https://jsonplaceholder.typicode.com/users',
      method: 'get'
    })
    console.log(data)
  } catch (error) {
    console.error(error)
  }
}

fetchData()

代码解析：

• 使用import引入封装好的request函数。
• 定义异步函数fetchData作为网络请求的入口函数。
• 在try语句中，使用await关键字调用request函数，并传入一个配置对象，其中定义了请求的url和method。
• 在catch语句中，输出错误信息到控制台。

3.2 发送POST请求

使用封装的axios发送POST请求示例：

import { request } from './request.js'

async function postData() {
  try {
    const data = await request({
      url: 'https://jsonplaceholder.typicode.com/posts',
      method: 'post',
      data: {
        title: 'foo',
        body: 'bar',
        userId: 1
      }
    })
    console.log(data)
  } catch (error) {
    console.error(error)
  }
}

postData()

代码解析：

• 使用import引入封装好的request函数。
• 定义异步函数postData作为网络请求的入口函数。
• 在try语句中，使用await关键字调用request函数，并传入一个配置对象，其中定义了POST请求的url、method和data参数。
• 在catch语句中，输出错误信息到控制台。

以上就是使用async/await封装axios的方法，可以根据实际的需求进行相应的修改和扩展，比如添加请求头、设置超时时间等等。