axios详解
2020/4/1 11:01:40
本文主要是介绍axios详解,对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!
axios是什么
- 前端最流行的 ajax请求库
- react/vue官方推荐使用axios发ajax请求
- 文档 github.com/axios/axios
axios特点
- 基于promise的异步ajax请求库
- 浏览器端/node端都可以使用
- 支持请求/响应拦截器
- 支持请求取消
- 请求/响应数据转换
- 批量发送多个请求
axios配置-实例创建方法1
创建一个实例
import axios from 'axios' let config = { baseURL: '接口地址', timeout: 5000, headers: {'X-Custom-Header': 'foobar'} } export default axios.create(config) 复制代码
axios配置-实例创建方法2
let axiosObj = axios.create() // axios 配置 axiosObj.defaults.timeout = 5000 let axiosDate // http request 拦截器 axiosObj.interceptors.request.use( config => { config.withCredentials = true // 开启跨域能力 是否携带cookie if (store.state.token) { config.headers.Authorization = `token ${store.state.token}` } if ( (config.data && config.data.loading === 'false') || (config.params && config.params.loading === 'false') || config.loading === 'false') { } else { axiosDate = new Date() store.dispatch('LOADING', true) } const axiosConfig = 1 ? fn(config) : config } ) const fn = (config) => { let accept = config.headers.common['Accept'] if (accept == null) { accept = '*/*' config.headers['Accept'] = accept } let date = config.headers['date'] if (date == null) { date = '' } let contentType = config.headers['contentType'] if (contentType == null) { contentType = '' } let {method, url, params} = config config.headers['X-x'] = "x" config.headers['X-x'] = 'x' return config } 复制代码
全局修改axios默认配置
axios.defaults.baseURL = 'https://api.example.com'; axios.defaults.headers.common['Authorization'] = AUTH_TOKEN; axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded'; 复制代码
实例默认配置
// 创建实例时修改配置 var instance = axios.create({ baseURL: 'https://api.example.com' }); // 实例创建之后修改配置 instance.defaults.headers.common['Authorization'] = AUTH_TOKEN; 复制代码
实例的方法
以下是所有可用的实例方法,额外声明的配置将与实例配置合并
axios#request(config) axios#get(url[, config]) axios#delete(url[, config]) axios#head(url[, config]) axios#options(url[, config]) axios#post(url[, data[, config]]) axios#put(url[, data[, config]]) axios#patch(url[, data[, config]]) 复制代码
配置优先级
配置项通过一定的规则合并,request config > instance.defaults > 系统默认,优先级高的覆盖优先级低的。
// 创建一个实例,这时的超时时间为系统默认的 0 var instance = axios.create(); // 通过instance.defaults重新设置超时时间为2.5s,因为优先级比系统默认高 instance.defaults.timeout = 2500; // 通过request config重新设置超时时间为5s,因为优先级比instance.defaults和系统默认都高 instance.get('/longRequest', { timeout: 5000 }); 复制代码
其他配置
// `auth'表示应该使用 HTTP 基本认证,并提供凭据。 // 这将设置一个`Authorization'头,覆盖任何现有的`Authorization'自定义头,使用`headers`设置。 auth: { username: 'janedoe', password: 's00pers3cret' }, 复制代码
更多配置 参考: github.com/axios/axios
使用
引入对应的axios
import axios from './axios.js' export const getData = () => { return axios.get('url') } 复制代码
axios的处理链流程拦截器简单使用
总结
参考
这篇关于axios详解的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!
- 2024-03-14system bios shadowed
- 2024-03-14gabios
- 2024-02-07iOS应用提交上架的最新流程
- 2024-02-06打包 iOS 的 IPA 文件
- 2023-12-07uniapp打包iOS应用并通过审核:代码混淆的终极解决方案 ?
- 2023-11-25uniapp IOS从打包到上架流程(详细简单) 原创
- 2023-11-10【iOS开发】iOS App的加固保护原理:使用ipaguard混淆加固
- 2023-09-30最强大的iOS应用源码保护工具:Ipa Guard,保护你的商业机密代码
- 2023-09-07iOS安全加固探讨:代码混淆、类名方法名混淆等方法
- 2023-09-05iOS代码加固与保护方法详解 - 提升iOS应用安全性的关键步骤