使用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出现报错则按照错误提示相应的安装所需依赖项即可

安装完成后，在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，如果有问题欢迎大家指正。