使用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 处理前拦截它们。
在我们的项目中,我们加入了在request加入了是否登录的判断,在response中加入了回复的具体消息。// 添加请求拦截器 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); });
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,如果有问题欢迎大家指正。