2021-3-22

前端实习-第2天

星期一。第一个任务就是在某vue小项目里封装axios，就参考了大项目以及csdn抄下来，mentor改来改去，然后就低头笑了。哎。
一般要在src目录下新建一个名为api的文件夹，下面新建一个api.js写axios的put、delete、get、post方法的封装、baseurl，以及一个ports.js的文件统一存放请求方法、接口、参数。

//api.js
import Vue from 'vue'
import axios from 'axios' // 引入axios

const AJAX = axios.create({
  baseURL: 'http://10.18.98.18:8081/server',
  timeout: 100000,
  headers: { 'Content-Type': 'application/json; charset=UTF-8' },
  withcredentials: false
})

// 请求拦截器
AJAX.interceptors.request.use(
  config => {
    // TODO: 开始loading
    return config
  },
  error => {
    console.log('发送请求错误', error)
    return Promise.error(error)
  }
)

// 响应拦截器
AJAX.interceptors.response.use(
  response => {
    // TODO: 结束loading
    if (response.status === 200) {
      return Promise.resolve(response.data)
    } else {
      return Promise.reject(response)
    }
  },
  error => {
    if (error && error.response && error.response.status) {
      Vue.prototype.$message.error(error.message)
      return Promise.reject(error.response)
    } else {
      Vue.prototype.$message.error(error)
    }
  }
)

// 封装get方法
export function get (url, params) {
  return new Promise((resolve, reject) => {
    AJAX.get(url, {
      params
    })
      .then(res => {
        resolve(res.data)
      })
      .catch(err => {
        reject(err.data)
      })
  })
}

// 封装post方法
export function post (url, data) {
  console.log(data)
  return new Promise((resolve, reject) => {
    AJAX.post(url, data)
      .then(res => {
        resolve(res.data)
      })
      .catch(err => {
        reject(err.data)
      })
  })
}

export function put (url, params) {
  return new Promise((resolve, reject) => {
    AJAX.put(url, params)
      .then(res => {
        resolve(res.data)
      })
      .catch(err => {
        reject(err.data)
      })
  })
}

export function remove (url, params) {
  console.log(url, params)
  return new Promise((resolve, reject) => {
    AJAX.delete(url, { params })
      .then(res => {
        resolve(res.data)
      })
      .catch(err => {
        reject(err.data)
      })
  })
}

//ports.js
import { get, post, remove, put } from './api'
export const GetPoint = p => get('/api/Camera/CameraList', p)
export const DeletePoint = p => remove('/api/Camera/DeleteCamera', p)
export const StartPoint = p => post('/api/Camera/ResetCamera', p)
export const StopPoint = p => post('/api/Camera/PauseCamera', p)
export const AddPoint = p => post('/api/Camera/AddCamera', p)
export const EditPoint = p => put('/api/Camera/UpdataCamera', p)
export const RealTime = p => post('/api/realtime', p)
export const GetImageData = p => get('/api/image_data', p)

如此便可在vue文件里导入方法进行请求了

import { GetPoint, DeletePoint, StopPoint, StartPoint, AddPoint, EditPoint } from '@/api/ports'