关于Vue中axios的封装实例详解

下面我将为你详细讲解关于Vue中axios的封装实例详解。

1. axios是什么？

axios是一个基于Promise的HTTP客户端，用于浏览器和node.js的请求发送。它可以用于简单地进行HTTP请求，也可以进行拦截请求和响应，转换请求和响应数据，取消请求等操作。

2. axios的优点

• 基于Promise，易于使用
• 支持拦截请求和响应
• 支持转换请求和响应数据格式
• 支持取消请求
• 支持客户端和服务端同时使用

3. axios的封装实例

封装axios可以使得我们在项目中更好地使用它，提高代码可维护性、可读性与重用性，下面是axios的封装实例。

3.1 创建axios实例

在创建axios实例之前，我们需要先安装axios，使用npm命令：npm install axios --save。

import axios from 'axios'

const service = axios.create({
  baseURL: 'https://api.example.com',
  timeout: 10000,
})

// request拦截器
service.interceptors.request.use(
  config => {
    // config.headers['Authorization'] = getToken()
    // config.headers['Content-Type'] = 'application/json;charset=UTF-8'
    return config
  },
  error => {
    console.log(error)
    return Promise.reject(error)
  }
)

// response拦截器
service.interceptors.response.use(
  response => {
    const res = response.data
    if (res.code !== 20000) {
      return Promise.reject(res)
    } else {
      return res
    }
  },
  error => {
    console.log(error)
    return Promise.reject(error)
  }
)

export default service

3.2 封装GET方法

import request from '@/utils/request'

export function getList(params) {
  return request({
    url: '/list',
    method: 'get',
    params
  })
}

3.3 封装POST方法

import request from '@/utils/request'

export function login(data) {
  return request({
    url: '/login',
    method: 'post',
    data
  })
}

4. 总结

通过以上的封装实例，我们可以更加灵活方便地使用axios，实现请求拦截和响应拦截、转换请求和响应数据格式，以及取消请求等常用操作。同时也能够更好地保证代码的可维护性和可读性，提高效率。