什么是axios？

是一个基于Promise 用于浏览器和 nodejs 的 HTTP 客户端简单的理解就是ajax的封装
在使用Vue.js框架开发前端项目时会经常发送ajax请求服务端接口在开发过程中需要对axios进一步封装方便在项目中的使用

axios的特性

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

axios的安装

npm install axios -S

一般我们会在项目根目录的src文件夹下新建一个utils文件夹,
在文件夹下放request.js文件,在request.js中首先导入axios，
然后设置属性，比如baseURL（公共地址）和 timeOut (超时时间）
还可以设置响应拦截和请求拦截，在请求拦截中可以设置loading动画的开启和配置请求头的token
在响应拦截中可以关闭loading和根据后端返回的状态码检测token是否有效
最后把server导出

import axios from 'axios'//创建一个axios
let server = axios.create({// 请求公共地址baseURL: "http://xxxxxxxxx/api",// 超时时间timeout: 5000,
})// 添加请求拦截器
axios.interceptors.request.use((config)=>{// 在发送请求之前做些什么// 比如判断是否有tokenreturn config;}, function (error) {// 对请求错误做些什么return Promise.reject(error);});// 添加响应拦截器
axios.interceptors.response.use((response)=>{// 对响应数据做点什么return response;}, function (error) {// 对响应错误做点什么return Promise.reject(error);});export default server

在根目录创建api文件夹统一接口管理,在创建JS文件(api.js)

//引入
import server from "./request.js"; //路劲自己修改export const login = (params) => {return server({url: "接口路径",method: "post" ,   //后端给什么写什么data: params})
}

在页面中就可以直接导入使用

import {login} from '@/api/api'  //引入页面//调用接口
login(){let data = {userName:"admin",passWord:123456} login(data).then(res =>{})
}

也可以使用 async 与 await 语法糖

import {login} from '@/api/api'  //引入页面//调用接口
async login(){let data = {userName:"admin",passWord:123456} let res = await login(data)
}

Axios的二次封装(简单易懂)相关推荐

axios如何二次封装
axios二次封装的五种方法为什么要封装 axios 的 API 很友好,你完全可以很轻松地在项目中直接使用. 不过随着项目规模增大,如果每发起一次HTTP请求,就要把这些比如设置超时时间.设置请求 ...
axios的二次封装与async,await的配合使用?
前言:前些日子读文章,说是vue3.0会在明年下半年正式推出,改动的地方好像也不少,比如说vue3.x的代码库将会用typescript编写,并提供改进的 TypeScript 支持.变化还是很快的, ...
axios进行二次封装
Web开发中,我们最常用的HTTP库就是Axios了,它的底层基于Ajax进行封装,在浏览器端和服务端都可以使用.如果大家对一些API不是很熟悉可以参考官方地址,或者中文社区. 为什么要对ax ...
Vue——axios的二次封装
文章目录一.请求和传递参数 1.get 请求 2.post 请求 3.axios 请求配置二.axios 的二次封装 1.配置拦截器 2.发送请求三.API 的解耦 1.配置文件对应的请求 2. ...
axios介绍以及对axios进行二次封装
目录一.axios基础 1.什么是axios? 2.axios的安装 3.axios常用配置项 4.axios和ajax的区别二.使用axios发送请求 1. 发送get无参请求 2. 发送get ...
axios的二次封装(详解)
一.首先让我们了解一下为什么要对axios进行二次封装? 1,代码封装,重用性高,减少代码量,减低维护难度. 2,统一处理一些常规的问题一劳永逸,如http错误. 3,拦截请求和响应,提前对数据进行处 ...
面试官：为啥要axios 的二次封装呢及其使用是干啥的
一.为什么要进行封装通常我们的项目会越做越大,页面也会越来越多,随之而来的是接口数量的增加.api统一管理,不管接口有多少,所有的接口都可以非常清晰,容易维护. 举个例子,当axios发生问题存在重 ...
基于axios的二次封装
1. axios的封装前言 axios是一个基于 promise 的 HTTP 库,目前,在vue,react框架中也还是备受青睐,根据不同项目的业务,也有许多种不同的封装方法,但不同的应用场景,导致 ...
react中axios的二次封装

Axios的二次封装(简单易懂)

什么是axios？

axios的特性

axios的安装

Axios的二次封装(简单易懂)相关推荐

最新文章

热门文章