Axios简单整理

Axios

用法:

  • axios(config)

  • axios.request(config)

  • axios.get(url[,config])

  • axios.delete(url[,config])

  • axios.head(url[,config])

  • axios.post(url[,data[,config]])

  • axios.put(url[,data[,config]])

  • axios.patch(url[,data[,config]])

axios(config)

axios({
    url:'http://xxxxx.xxx',
    methods:"get/post/...",
    params:{
        key1:value1,
        key2:value2,
        //...
    },
    timeout:1000,//超时时间 ms
    
}).then(res => {
    //成功代码
}).catch( err => {
    //失败代码
})

axios.get(url[,config])

axios.get('http://xxxxx.xxx',{
    
})

axios 发送并发请求

axios.all([
    axios({
        //...
    }),
    axios({
        //...
    })
]).then( axios.spread((res1, res2) => {
    //res1为第一个请求返回的数据
    //res2为第二个请求返回的数据
    //请求都返回结果后才执行这里的代码
})).catch( err => {
    
})

axios 全局配置

//全局配置会自动添加到每个 axios 请求的配置信息中
//常用全局配置信息:
axios.defaults.baseURL = 'xxxx'
axios.defaults.timeout = 1000
axios.defaults.methods = 'get'
axios.defaults.headers = {
    'content-type':'application/json',
    //...
}
axios.defaults.params = {
    //查询对象
}
axios.defaults.transformRequest = [(data) => {
    //向服务器发送前,修改请求数据
    //必须返回字符串
    //只能用在 'PUT', 'POST' 和 'PATCH' 这几个请求方法
    return data
}]
axios.defaults.transformResponse = [(data) => {
    //在传递给 then/catch 前,允许修改响应数据
    //对data进行任意处理
    return data
}]

axios创建实例

const test = axios.create({
    //一些实例通用配置
    baseURL:'http://111.222.33.44:80',
    timeout:5000
})

//使用实例
test({
    url:'/home',
    //其他配置
}).then( res => {
    //...
}).catch( err => {
    //...
})

axios 拦截器

//全局请求拦截
axios.interceptors.request.use( config => {
    //拦截成功发送前的请求
    
    //1.对请求的 config 信息做一些处理
    //2.在请求时对某些页面做一些处理
    
    //最后一定要把 config 返回,否则发送的请求拿不到该配置信息
    return config
},err => {
    //拦截发送失败的请求,网络原因
})
//某个实例请求拦截
[实例名].interceptors.request.use(/*代码同上*/)



//全局响应拦截
axios.interceptors.response.use( res => {
    //拦截成功响应结果
    
    //处理完响应数据后必须将结果返回,否则发送的请求拿不到数据
    return res
}, err => {
    //拦截失败响应结果
})
//某个实例响应拦截
[实例名].interceptors.response.use(/*代码同上*/)
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

  • axios 基于 Promise 的 HTTP 请求客户端,可同时在浏览器和 node.js 中使用 功能特性 在...
    Yanghc阅读 9,047评论 0 7
  • axios 基于 Promise 的 HTTP 请求客户端,可同时在浏览器和 node.js 中使用 功能特性 在...
    jslxm阅读 9,811评论 0 1
  • 一、安装 1、 利用npm安装npm install axios --save 2、 利用bower安装bower...
    kiddings阅读 5,779评论 0 3
  • 本周在做一个使用vuejs的前端项目,访问后端服务使用axios库,这里对照官方文档,简单记录下,也方便大家参考。...
    JadePeng阅读 13,817评论 1 59
  • axios插件的使用操作 axios插件的使用操作 axios [图片上传失败...(image-744a97-1...
    魔仙堡杠把子灬阅读 8,166评论 0 1

友情链接更多精彩内容