react/vue封装axios 完善的接口请求

使用npm安装：

npm install axios --save

或者使用yarn：

yarn add axios

// src/utils/request.js

import axios from 'axios'

axios.defaults.headers.post['Content-Type'] = 'application/json';

const service = axios.create({
  baseURL: process.env.REACT_APP_BASE_API,
  timeout: 5000
})

// 请求拦截器
service.interceptors.request.use(
  config => {
    // 在请求头中添加token信息，可以根据具体业务场景进行修改
    // 如果已经存在了Authorization字段，则不需要再添加token信息
    if (!config.headers.Authorization) {
      const token = localStorage.getItem('token')
      if (token) {
        config.headers.Authorization = `Bearer ${token}`
      }
    }

    return config
  },
  error => {
    Promise.reject(error)
  }
)

// 响应拦截器
service.interceptors.response.use(
  response => {
    const { status, data } = response
    if (status === 200) {
      // 根据后端返回数据格式进行具体的处理
      if (data.code === 0) {
        return Promise.resolve(data.data)
      } else {
        const message = data.msg || '未知错误'
        return Promise.reject(new Error(message))
      }
    } else {
      return Promise.reject(response)
    }
  },
  error => {
    let message = error.message
    if (error.response && error.response.data) {
      const errData = error.response.data
      message = errData.msg || '未知错误'
    }
    return Promise.reject(new Error(message))
  }
)

/**
 * get请求
 * @param {string} url 请求地址
 * @param {object} params 查询参数
 */
export function get(url, params = {}) {
  return service.get(url, {
    params
  })
}

/**
 * post请求
 * @param {string} url 请求地址
 * @param {object} data 提交的数据
 */
export function post(url, data = {}) {
  return service.post(url, data)
}

/**
 * put请求
 * @param {string} url 请求地址
 * @param {object} data 提交的数据
 */
export function put(url, data = {}) {
  return service.put(url, data)
}

/**
 * delete请求
 * @param {string} url 请求地址
 * @param {object} params 查询参数
 */
export function del(url, params = {}) {
  return service.delete(url, {
    params
  })
}

在需要使用接口请求的地方引入 request.js 文件，并使用封装好的请求方法

// src/views/home/index.js

import React, { useEffect, useState } from 'react'
import { get } from '../../utils/request'

function Home() {
  const [list, setList] = useState([])

  useEffect(() => {
    loadData()
  }, [])

  async function loadData() {
    try {
      const data = await get('/api/list')
      setList(data)
    } catch (error) {
      console.error(error.message)
    }
  }

  return (
    <div>
      {list.map(item => (
        <div key={item.id}>{item.name}</div>
      ))}
    </div>
  )
}

export default Home

react/vue封装axios 完善的接口请求

猜你喜欢