使用axios调用后端接口


文章目录

  • 使用axios调用后端接口
  • 概述
  • 简介及环境准备
  • axios简介
  • 环境准备
  • node.Js
  • 安装axios
  • 使用axios
  • 基本配置
  • 具体利用


概述

在这次的项目中负责了前端调用后端接口的部分，小组决定使用axios，于是对其进行了学习。在这里叙述一下学习的内容和使用的情况。

简介及环境准备

axios简介

Axios 是一个基于 promise 的 HTTP 库，可以用在浏览器和 node.js 中。其具有如下特点：

  • 从浏览器中创建 XMLHttpRequests
  • 从 node.js 创建 http 请求
  • 支持 Promise API
  • 拦截请求和响应
  • 转换请求数据和响应数据
  • 取消请求
  • 自动转换 JSON 数据
  • 客户端支持防御 XSRF

环境准备

node.Js

如果Windows没安装nodejs的可以访问其官网下载地址下载Windows Installer并根据自身操作系统位数进行安装。若在Linux环境下，本人是参照这篇博客进行安装配置，在安装时如果make和./configure出现报错则按照错误提示相应的安装所需依赖项即可

axios调接口会拼接本地路径 axios调用后端接口_端接


安装完成后，在powershell输入node -v和npm -v验证安装成功并查看版本

安装axios

在成功安装node.js后使用npm安装axios

$ npm install axios

使用axios

axios的使用详细说明可以查看Axios中文说明

基本配置

  • 引入axios
import axios from 'axios'
  • 在实现对api的调用之前，我们先创建实例。实例的方法可以查看上一个链接的相关内容。
const instance = axios.create({
  baseURL: process.env.REACT_APP_API_URL,
  timeout: 2000,
  withCredentials: true
})
  • 我们用的是React框架，需要在项目第一级文件中加入.env对REACT_APP_API_URL进行设置
REACT_APP_API_URL=/api
  • ps：可以加入一个拦截器，在请求或响应被 then 或 catch 处理前拦截它们。
// 添加请求拦截器
axios.interceptors.request.use(function (config) {
    // 在发送请求之前做些什么
    return config;
  }, function (error) {
    // 对请求错误做些什么
    return Promise.reject(error);
  });

// 添加响应拦截器
axios.interceptors.response.use(function (response) {
    // 对响应数据做点什么
    return response;
  }, function (error) {
    // 对响应错误做点什么
    return Promise.reject(error);
  });
  • 在我们的项目中，我们加入了在request加入了是否登录的判断，在response中加入了回复的具体消息。
instance.interceptors.request.use(config => {
  let authorization = config.headers.authorization || ''
  const jwtToken = localStorage.getItem('JWT_TOKEN')
  if (jwtToken) {
    authorization += ` Bearer ${jwtToken}`
  }
  return { ...config, headers: { ...config.headers, authorization } }
})

instance.interceptors.response.use(
  res => {
    return res
  },
  error => {
    const msg =
      (error.response ? messages[error.response.data] : error.Message) ||
      '未定义错误'
    return Promise.reject({ errorMessage: msg })
  }
)

具体利用

在完成了如上配置后，就可以开始进行调用后端接口的阶段了。

  • 加入刚刚创建的实例
import instance from './instance'
  • 按照你们小组的设计或者api文档设计调用的方法和所需的参数，设计调用的函数并在前端所需的地方进行调用。
const prefix = '/tasks'
export async function getAllTasks(page, taskInPage, filters, sort) {
    try {
      const respones = await instance.get(`${prefix}/`, {
        params: {
          page: page,
          per_page: taskInPage,
          filter: filters,
          sort: sort
        }
      })
      return respones.data
    } catch (error) {
      return error
    }
  }

到这里就已经完成了使用axios调用后端接口的基本部分，这也是我第一次使用axios，如果有问题欢迎大家指正。