Laravel+Vue 问答平台项目实战前端 - 前端请求

本文将使用Axios库，与后端接口进行HTTP请求交互。将前端请求API接口的方法，统一封装在src/api目录下。

Axios 官方文档地址

安装axios

在前端项目ant-qa-front根目录下执行npm命令

npm install axios -S

等待安装完成即可

封装请求

在构建ant-qa-front前端项目时，已经创建src/utils/request.js封装发起http请求方法，编辑此文件

import axios from 'axios'
import {getToken, removeToken} from './store'

// 创建 axios 实例
const baseUrl = process.env.VUE_APP_DOMAIN + process.env.VUE_APP_API_BASE_URL
const request = axios.create({
  // API 请求的默认前缀
  baseURL: baseUrl,
  timeout: 6000 // 请求超时时间
})

// 异常拦截处理器
const errorHandler = (error) => {
  console.log(error)
  return Promise.reject(error)
}

// request interceptor
request.interceptors.request.use(config => {
  // 如果 token 存在
  // 让每个请求携带自定义 token 请根据实际情况自行修改
  const token = getToken()
  if (token) {
    config.headers['Authorization'] = 'Bearer ' + token
  }
  return config
}, errorHandler)

// response interceptor
request.interceptors.response.use((response) => {
  let data = response.data;
  // 认证失败
  if (data.code === -10001) {
    removeToken()
  }
  return data
}, errorHandler)

export default request

用户相关请求

编辑文件src/api/user.js

import request from '../utils/request'

const api = {
  register: '/auth/register',
  login: '/auth/login',
  logout: '/user/logout',
  userInfo: '/user/info'
}

export default api

export function registerApi (parameter) {
  return request({
    url: api.register,
    method: 'post',
    data: parameter
  })
}

export function loginApi (parameter) {
  return request({
    url: api.login,
    method: 'post',
    data: parameter
  })
}

export function logoutApi () {
  return request({
    url: api.logout,
    method: 'post',
  })
}

export function userInfoApi () {
  return request({
    url: api.userInfo,
    method: 'get',
  })  
}

引入request库，定义用户请求相关的方法。

问题相关请求

编辑文件src/api/question.js

import request from '../utils/request'

const api = {
  paginate: '/question/paginate',
  show: '/question/show',
  like: '/question/like',
  cancelLike: '/question/like/cancel',
  answer: '/question/answer',
  createQuestion: '/question/create'
}

export default api

export function getNewQuestionList (parameter) {
  return request({
    url: api.paginate,
    method: 'get',
    params: parameter
  })
}

export function getQuestion (parameter) {
  return request({
    url: api.show,
    method: 'get',
    params: parameter
  })
}

export function likeQuestion (parameter) {
  return request({
    url: api.like,
    method: 'post',
    data: parameter
  })
}

export function cancelLikeQuestion (parameter) {
  return request({
    url: api.cancelLike,
    method: 'post',
    data: parameter
  })
}

export function answerQuestion (parameter) {
  return request({
    url: api.answer,
    method: 'post',
    data: parameter
  })
}

export function createQuestion (parameter) {
  return request({
    url: api.createQuestion,
    method: 'post',
    data: parameter
  })
}

引入request库，定义问题请求相关的方法。

上一篇 Laravel+Vue 问答平台项目实战前端 - 前端本地存储

下一篇 Laravel+Vue 问答平台项目实战前端 - 前端状态管理