Vue项目 axios使用教程以及封装使用

一、Axios是什么？

Axios是一个基于promise的HTTP库，类似于jQuery的ajax，用于http请求。可以应用于浏览器端和node.js，既可以用于客户端，也可以用于node.js编写的服务端。
个人简单理解就是：和后台进行交互，获取数据；

二、使用步骤 

1.安装axios：可以通过npm或者yarn来安装axios,命令如下:

npm install axios

2.在vue的src中创建一个request.js文件并引入axios,将axios封装成一个文件，以便在项目中统一管理和使用。下面是一个示例的axios封装文件的代码：

// request.js

import axios from 'axios'

const instance = axios.create({
  baseURL: 'https://api.example.com', // 设置请求的baseURL
  timeout: 5000 // 设置请求超时时间
})

// 请求拦截器
instance.interceptors.request.use(
  config => {
    // 可以在发送请求前进行一些处理，例如添加token等
    return config
  },
  error => {
// 对请求错误做些什么
    return Promise.reject(error)
  }
)

// 响应拦截器
instance.interceptors.response.use(
  response => {
    // 可以在获取到响应后进行一些处理，例如处理错误码等
    return response.data
  },
  error => {
  // 对响应错误做点什么
    return Promise.reject(error)
  }
)

export default instance

在上面的代码中，我们创建了一个axios实例，并配置了baseURL和timeout。同时，我们还使用了请求拦截器和响应拦截器来对请求和响应进行一些处理。 

在其他需要使用axios的地方，只需要引入这个封装好的axios实例即可。例如： 

import instance from './request.js'

instance.get('/api/user')
  .then(response => {
    console.log(response)
  })
  .catch(error => {
    console.error(error)
  })

在这个示例中，我们通过import instance from './request.js'引入了封装好的axios实例，然后使用instance.get('/api/user')来发送GET请求。通过这种方式，我们可以方便地使用封装好的axios实例来发送请求，并且可以在拦截器中进行一些统一的处理。