axios在vue中的使用_技术笔记

中午吃什么 2024-11-03

请求拦截器
响应拦截器

0赞 · 0采集
范东东 2022-02-09

//拦截器：在请求或响应被处理前拦截它们
//请求拦截器，响应拦截器
import axios from 'axios'
export default{
    name:'axios3',
    created(){
        //请求拦截器
        axios.interceptors.request.use(config=>{
            //在发送请求前做些什么
            return config
        },err=>{
            //在请求错误的时候做些什么
            return Promise.reject(err)
        })
        //响应拦截器
        axios.interceptors.response.use(res=>{
            //请求成功对响应数据做处理
            return res
        },err=>{
            //响应错误做些什么
            return Promise.reject(err)
        })
    }
}
请求
axios.get().then(res=>{}).catch(err=>{})

//取消拦截器
let interceptors = axios.interceptors.request.use(
    config =>{
         config.headers={
            auth:true
        }
        return config
    })
axios.interceptors.request.eject(interceptors)

//例子登录状态（token:''）
let instance = axios.create({})
instance.interceptors.request.use(
    config=>{
        config.headers.token = ''
        return config
    }
)
//不需要登录的接口
let newInstance = axios.create({})

//移动端开发
let instance_phone = axios.create({})
instance_phone.interceptors.rquest.use(config=>{
    $('#model').show()
    return config
})
instance_phone.interceptors.response.use(res=>{
    $('#model').hide()
    return res
})

2赞 · 0采集
you0509 2021-12-15

//axios 拦截器：在请求或响应被处理前拦截它们。请求前拦截，响应后拦截
//使用语法。1请求拦截器
axios.interceptors.request.use(config=>{
//发送请求前做什么
    return config
},err=>{
//在请求错误的时候做些什么
return promise.reject(err)
})
//响应拦截器
axios.interceptors.response.use(res=>{
//请求接口成功对响应数据做处理
return res
},err=>{
    //响应错误做什么,到了后断返回的错误
    return promise.reject(err)
})
//取消拦截器（了解）, 实际开发很少用到
let inter=axios.interceptors.request.use(config=>{
config,headers={auth:true}
return config
})
//使用拦截器
axios.inerceptors.request.eject(inter)
//例子登陆状态（token:''）访问登陆的接口
let instance=axios.create({})
instance.inerceptors.request.use(
config=>{
    config.headers.token=''
})
//访问不用登陆的接口
let insterNew=axios.create({})
insterNew.interceptors.request.use(config=>{
    $('#modal').show();
return config
})
insterNew.interceptors.resbonce.use(res=>{
$('modal').hide()
return res
})

0赞 · 0采集

山水有重逢 2021-06-10

拦截器实例登录状态 token: ''

//开发的时候一般是给实例添加拦截器，给全局添加会造成全局污染

//需要登录的接口
let instance = axiios.create({})
instance.interceptors.request.use(config=>{
    config.headers.token = ''
    return config
})

//不需要登录的接口，另外创建一个实例
let newInstance = axios.create({})

//移动端开发

let instance_phone = axiios.create({})
//请求等待样式
instance_phone.interceptors.request.use(config=>{
    $('#modal').show()
    return config
}) 
//返回响应样式
instance_phone.interceptors.response.use(res=>{
    $('#modal').show().hide()
    return res
})

0赞 · 0采集

山水有重逢 2021-06-09

拦截器在请求或响应被处理前拦截它们

请求拦截器

axios.interceptors.request.use(config=>{
    //在发送请求前做些什么
    return config
},err=>{
    //在请求错误的时候做些什么
    return Promis.reject(err)
})

响应拦截器

axios.interceptors.response.use(res=>{
    //请求成功对响应数据做处理
    return res
},err=>{
    //响应错误做些什么
    return Promise.reject(err)
})

//取消拦截器，不常用不重要

0赞 · 0采集

光天化日之下 2021-04-06

token

0赞 · 0采集
慕侠9197147 2021-03-02

取消拦截器：axios.interceptors.request.eject(http)
http 是一个axios 实例，axios是全局对象

0赞 · 0采集

慕设计8118825 2021-01-19

请求拦截器

axios.interceptorss.request.use
(config => {
 // do something before sending request
 return config
}, err => {
 // 在请求错误的时候做些什么
 return Promise.reject(err)
})

截图

0赞 · 0采集

大鹏111 2020-12-23

拦截器
请求拦截器使用场景：在请求被处理前拦截，做一些操作（例如：登录状态，通常登录成功后，后端会返回一个token，这个token会存储一些信息，这样前端每次发请求时带token才可以访问一些资源）。
请求拦截器使用方法（use方法有两个参数，第一个是请求前的回调函数，请求配置，也就是在发送请求前做一些操作。第二个是请求错误的回调函数）
拓展：promise有两个函数一个是reslove函数，一般成功时用，reject一般失败错误时用。
使用场景：在响应被处理前拦截，做一些操作。
响应拦截器使用方法：（use方法有两个参数，第一个是请求前的回调函数，请求配置，也就是在发送请求前做一些操作。第二个是请求错误的回调函数）
拓展：axios.get().then(res=>{})中的then相当于发送请求成功后的回调函数，而axios.get().catch(err=>{})相当于请求成功，对响应失败的处理，也就是reject的err会触发catch方法。
请求错误和响应错误区别：请求错误表示请求没有到达后端，浏览器会报一些错误，比如请求接口没有，就会报404。例如：从数据库查询某一条记录，但是没有，后台返回一个状态码和错误信息，此时就是响应错误（请求到达后端，返回错误称为响应错误。没到达后端，成为请求错误）。
取消拦截器使用方法
使用场景：对拦截器进行取消。
拓展：一般使用拦截器时，都是声明一个变量，给实例添加拦截器，给实例添加属性，一般不会给axios添加内容，避免造成全局污染。
拓展：当在请求拦截器中，对headers的属性进行赋值时，通常使用config.headers.token='',而不是config.headers={token:‘’},因为第二种方式会把headers里的其他属性覆盖掉。
不同axios实例访问不同接口，不同axios实例有不同拦截器，从而实现有需要拦截，有不需要拦截的。
请求拦截器其他使用场景：比如某一个请求，可能需要几秒，此时我们可以通过请求拦截器添加一个页面的等待的样式，等数据响应回来时再取消这个样式。

0赞 · 0采集
晨曦8412 2020-06-26

取消拦截器：
axios.interceptors.request.eject(interceptors实例)

截图
0赞 · 0采集
慕用0863198 2020-03-19

请求成功隐藏弹窗

截图
0赞 · 0采集
慕用0863198 2020-03-19

移动端的开发可以设置一加载就进行显示的默认样式，然后使用请求拦截器进行显示，响应拦截器进行隐藏

截图
0赞 · 0采集
慕用0863198 2020-03-19

有一些不需要登录的接口可以不使用相应拦截器添加token，而是新建一个axios实例

截图
0赞 · 0采集
慕用0863198 2020-03-19

执行。。。.eject方法来取消拦截器（将存放拦截器变量的参数传入）

截图
0赞 · 0采集
慕用0863198 2020-03-19

取消拦截器，使用一个变量来存放请求拦截器

截图
0赞 · 0采集
慕用0863198 2020-03-19

如图，请求拦截器的使用，在请求成功的时候，对res的data进行判断然后进行处理，

截图
0赞 · 0采集
慕用0863198 2020-03-19
如图，请求拦截器的使用，是一个promise的写法，获取token，并设置在头部
```
const token = Cookies.get('token')
config.headers.common['token'] = token
```
截图
0赞 · 0采集
慕用0863198 2020-03-19

拦截器就是在请求之前进行处理和在响应回来呗处理之前进行处理

截图
0赞 · 0采集
Gy_gY 2020-03-12

axios响应拦截器

截图
0赞 · 0采集
Gy_gY 2020-03-12

axios请求拦截器

截图
0赞 · 0采集
勇闯极限 2020-02-21

axios有请求拦截器和响应拦截器，可以在请求拦截器里设置header公共参数

0赞 · 0采集
慕神9104124 2020-01-04

在实例上添加请求拦截器，而不在axios上直接添加，是为了避免污染全局，并且多个实例可以满足不同的情景下的请求：如需判断用户登录状态的接口请求，与不需要判断登录状态就可以直接请求的接口

截图
0赞 · 0采集
慕数据0097812 2019-11-25

//## 注册拦截器
// 请求拦截器
axios.interceptors.request.user(
config => {
// 在发送前做些什么
return config
}, err => {
// 在请求错误时做些什么
return Promise.reject(err)
}
)

// 响应拦截器
axios.interceptors.response.use(
res => {
// 请求成功对响应数据处理
return res
}, err => {
// 响应错误做些什么
return Promise.reject(err)
}
)

let interceptors = axios.interceptors.reqeuset.use(
config => {
config.header = {auth: true}
}
return config
)

// ## 注销拦截器
axios.interceptors.reqeust.eject(interceptors)

截图
0赞 · 0采集

数据加载中...