vue中axios封装思路

第一步安装

npm install axios; // 安装axios

第二步引入
我会在项目的src目录中，新建一个http文件夹，在里面新建一个request.js和一个api.js文件以及port.js。request.js文件用来封装我们的axios，api.js用来统一管理我们的接口，port.js管理我们请求的路径。

// 在request.js中引入axios
import axios from 'axios'; // 引入axios

设置接口请求前缀

// 环境的切换
if (process.env.NODE_ENV == 'development') {
	axios.defaults.baseURL = 'https://www.xx.com';}
else if (process.env.NODE_ENV == 'debug') {
	axios.defaults.baseURL = 'https://www.xx.com';
}
else if (process.env.NODE_ENV == 'production') {
	axios.defaults.baseURL = 'https://www.xxx.com';
}

设置请求超时

axios.defaults.timeout = 3000

拦截器

请求拦截：我们在发送请求前可以进行一个请求的拦截，为什么要拦截呢，我们拦截请求是用来做什么的？我们可以在请求被发送之前进行一个拦截，如根据状态码判断登录状态、授权等。

// 请求拦截
axios.interceptors.request.use(data => {
  console.log('请求拦截', data)
  return data
// eslint-disable-next-line prefer-promise-reject-errors
}, _error => Promise.reject('请求错误'))

响应拦截：响应拦截器挺好理解，就是服务器返回给我们的数据，我们在拿到之前可以对他进行一些处理。如果返回的状态码为200，说明接口请求成功，可以正常拿到数据，否则的话抛出错误。

// 响应拦截
axios.interceptors.response.use(data => {
  console.log('响应拦截', data)
  return data
// eslint-disable-next-line prefer-promise-reject-errors
}, _error => Promise.reject('响应错误'))

port.js：保存路径文件

const storagePort = {
  // 获取用户信息接口
  userInfoPort: '/api/xxx/userInfo',
  // 获取课程信息接口
  courseInfo: '/api/xxx/courseInfo/',
  // 获取评论接口
  comment: '/api/xxx/courseComment'
}
// 导出携带接口对象
export default storagePort

api.js

import network from './request'
// 接口文件
import port from './port'

// get非携带参数请求
export function getVeryTakeJoin () {
  return network({
    url: port.userInfoPort,
    method: 'get'
  })
}
// get携带参数请求
export function getTakeJoin (info) {
  return network({
    url: port.courseInfo + `${Object.keys(info)[0]}=${info.basis_id}`,
    method: 'get'
  })
}
// post携带参数请求
export function postComment (info) {
  return network({
    url: port.comment,
    method: 'post',
    data: info
  })
}