如何使用axios二次封装实现前后端交互

Axios是一个基于Promise的HTTP客户端，它可以用在浏览器和node.js中。它提供了一种简单的方法来处理Ajax请求，使前端开发人员能够更轻松地实现前后端交互。本文将介绍如何使用axios二次封装实现前后端交互。

安装axios

我们需要安装axios，可以使用npm或者yarn进行安装：

$ npm install axios
$ yarn add axios

axios二次封装

在安装完axios之后，我们可以对axios进行二次封装，以便更好地使用axios。下面是一个简单的axios二次封装的例子：

import axios from 'axios'

const instance = axios.create({
  baseURL: 'http://localhost:00',
  timeout: 00
})

// 添加请求拦截器
instance.interceptors.request.use(
  config => {
    // 在发送请求之前做些什么
    return config
  },
  error => {
    // 对请求错误做些什么
    return Promise.reject(error)
  }
)

// 添加响应拦截器
instance.interceptors.response.use(
  response => {
    // 对响应数据做点什么
    return response
  },
  error => {
    // 对响应错误做点什么
    return Promise.reject(error)
  }
)

export default instance

在上面的例子中，我们使用axios.create()方法创建了一个axios实例，配置了基础URL和超时时间，添加了请求拦截器和响应拦截器，将实例导出。

使用axios实现前后端交互

我们可以使用axios实现前后端交互了，下面是一个简单的例子：

// 发送get请求
instance.get('/api/user/list').then(res => {
  console.log(res.data)
})

// 发送post请求
instance.post('/api/user/add', {name: 'Tom'}).then(res => {
  console.log(res.data)
})

在上面的例子中，我们使用axios实例的get()和post()方法发送了get请求和post请求，在回调函数中拿到了响应数据，从而实现了前后端交互。

本文介绍了如何使用axios二次封装实现前后端交互，其中包括安装axios、axios二次封装、使用axios实现前后端交互等内容。通过axios二次封装，我们可以更方便地实现前后端交互。