如何封装axios？axios 的简单封装

1.首先引入 axios

import axios from 'axios'

2.创建一个实例

const api = axios.create({baseURL: '', // 请求的公共地址部分timeout: 　3000 // 请求超时时间 当请求时间超过5秒还未取得结果时 提示用户请求超时
})

3axios的拦截器
请求相关处理请求拦截在请求拦截中可以补充请求相关的配置

// interceptors axios的拦截器对象
api.interceptors.request.use(config => {// config 请求的信息return config // 将配置完成的config对象返回出去 如果不返回 请求则不会进行
}, err => {// 请求发生错误时的处理 抛出错误Promise.reject(err)
})

4.response

api.interceptors.response.use(res => {// 我们一般在这里处理，请求成功后的错误状态码 例如状态码是500，404，403// res 是所有相应的信息console.log(res)return Promise.resolve(res)
}, err => {// 服务器响应发生错误时的处理Promise.reject(err)
})

5暴露api

export default api

6.封装接口

import api from '../index.js';//下面是简写的形式
// getXXX 自定义的接口名字
export const getXXX = (params) => api.get(`/apigb/v1/component`, { params})export const postXXX = (params) => api.post(`/apigb/v1/component/update-info`, params)// 下面是详细的写法
export const xxxx = (params) => api({url: '', // 请求地址method: 'post', // 请求方式// data: params, // (一般post请求，我们习惯使用 data属性来传参)params: params //(一般get请求，我们习惯使用params属性来传参）// 注意：data，和 params 两个属性传参使用，并不是固定的，也可以调换使用。
})

7在需要的页面import引入方法即可

import {getBanner} from '../../request/home/home'
getBanner().then(res=>{}

如何封装axios？axios 的简单封装相关推荐

axios的简单封装和http请求实践
对axios做一个简单的封装和实现的思路,主要实现: 统一捕获接口报错(拦截器) 基础验证 (auth) import axios from 'axios' // 最基本的全局配置 const ins ...
【跨域问题】Vue简单封装axios—解决post请求后端接收不到参数问题
原因分析: 1. 传参数据没有序列化? 解决办法: [推荐] [推荐阅读] vue+axios+qs序列化 "三步解析"[含demo实例]- 代码篇 2. 服务端接受数据格式参数配 ...
vue axios 简单封装以及思考
先安装 axios npm install axios axios的详细介绍以及用法就不多说了请移步 github ➡️ https://github.com/axios/axios 下面是简单 ...
axios的简单封装
前言在每次使用原装的axios发送 http请求时,如果需要token验证,则都需要创建拦截器,添加'token'请求头,或者在config中具体的请求体中添加,是一个非常麻烦的事情. 遇到401, ...
vue项目请求封装；axios封装使用
vue项目,封装axios请求方式和响应状态码:以及接口的api封装: 目录结构: 1.具体在src/utils/request.js下封装axios: ①引入axios和router ②引入elem ...
axios学习笔记（二）：轻松弄懂XHR的使用及如何封装简易axios
使用 XMLHttpRequest(XHR)对象可以与服务器交互.您可以从URL获取数据,而无需让整个的页面刷新.这允许网页在不影响用户的操作的情况下更新页面的局部内容.在 AJAX 编程中,XMLH ...
axios如何二次封装
axios二次封装的五种方法为什么要封装 axios 的 API 很友好,你完全可以很轻松地在项目中直接使用. 不过随着项目规模增大,如果每发起一次HTTP请求,就要把这些比如设置超时时间.设置请求 ...
axios的使用与封装
什么是axios Axios 是一个基于 promise 的 HTTP 库,可以用在浏览器和 node.js 中. 特性从浏览器中创建 XMLHttpRequests 从 node.js 创建 ht ...
【Day01】你有封装过 axios 吗？主要是封装哪些方面？如何中断 axios 请求？
你有封装过 axios 吗?主要是封装哪些方面?如何中断 axios 请求? 一.封装过哪些方面? 1.1 http 封装 1.2 api 封装 1.2.1 总 api 接口的映射 1.2.2 建立一 ...
axios 上传文件封装_axios使用及封装
axios跨域及封装 1.安装 npm install axios --save 2.main.js引用 import axios from 'axios'; 3.axios基本用法 function ...

如何封装axios？axios 的简单封装

如何封装axios？axios 的简单封装相关推荐

最新文章

热门文章