npm install axios
# 或者
yarn add axios

import axios from 'axios'
const service = axios.create({
  baseURL: process.env.VUE_APP_BASE_API,
  timeout: 5000
})

// request 攔截器
service.interceptors.request.use(
  config => {
    // 在這里可以設(shè)置請(qǐng)求頭、請(qǐng)求參數(shù)等return config
  },
  error => {
    console.log(error)
    return Promise.reject(error)
  }
)

// response 攔截器
service.interceptors.response.use(
  response => {
    // 在這里處理返回?cái)?shù)據(jù)const { data } = response
    if (data.code !== 200) {
      console.error('Error:', data.message)
      return Promise.reject(newError(data.message || 'Error'))
    } else {
      return data
    }
  },
  error => {
    console.log(error)
    return Promise.reject(error)
  }
)

// 封裝具體的請(qǐng)求方法: 四種請(qǐng)求類(lèi)型不和下面的3和4標(biāo)題內(nèi)容放在一起
export const get = (url, params) => {
  return service .get(url, { params });
};

export const post = (url, data) => {
  return service .post(url, data);
};

export const put = (url, data) => {
  return service .put(url, data);
};

export const delete= (url, data) => {
  return service .delete(url, data);
};

export default service

import service from '@/utils/request'
export function request(config) {
  return service(config)
}

import { request } from '@/api'
request({
  url: '/user',
  method: 'get'
}).then(response => {
  console.log(response)
})

import { get, post,put, delete } from '@/utils/request';

// 發(fā)送GET請(qǐng)求的示例
get('/users', { id: 1 })
  .then((response) => {
    // 處理響應(yīng)數(shù)據(jù)
    console.log(response);
  })
  .catch((error) => {
    // 處理請(qǐng)求錯(cuò)誤
    console.error(error);
  });

// 發(fā)送POST請(qǐng)求的示例
post('/users', { name: 'John', age: 25 })
  .then((response) => {
    // 處理響應(yīng)數(shù)據(jù)
    console.log(response);
  })
  .catch((error) => {
    // 處理請(qǐng)求錯(cuò)誤
    console.error(error);
  });