1一乐

V1

2022/01/26阅读:67主题:默认主题

axios基本使用、使用axios前必知细节、axios和实例对象区别、拦截器、取消请求



一、axios的基本使用:

✿ 使用axios前必知细节:

1、axios 函数对象(可以作为axios(config)函数使用去发送请求,也可以作为对象调用方法axios.request(config)发送请求)

■ 查看源码发现:
□ 起初,axios是一个函数 (调用axios(config)函数发送请求,实际上是调用Axios.prototype.request(config) 方法
□ 在后续,又给它添加上了一些属性【方法属性】(将Axios原型上的方法属性添加到instance身上,所以axios可以调用属性axios.request(config)发送请求)


2、[, ] 是可选参数列表 举例:axios.get(url[, config]),其中的[, config] 是可选参数




1、axios(config):调用自身,通用/最本质的发任意类型请求的方法:

<button class="btn btn-primary">post请求</button>

/
/获取按钮
const btns = document.querySelectorAll('button');
btns[0].onclick = function (){
    /
/调用axios方法来发送AJAx请求,axios方法的返回值是一个Promise对象(then方法可以拿到异步请求的结果)
    axios({
        /
/请求类型
        method: 'post',
        /
/URL
        url:'http:/
/localhost:3000/posts/2',
     //设置请求体(即传输的数据)
        data:{
       title: "candy",
         author: "i like"
        }
    }).then(response => {
        console.log(response)
    })
};

2、axios.request(config):调用属性的方法发送请求,等同于 axios(config)

<button class="btn btn-primary">post请求</button>

/
/获取按钮
const btns = document.querySelectorAll('button');
btns[0].onclick = function (){
    /
/调用axios方法来发送AJAx请求,axios方法的返回值是一个Promise对象(then方法可以拿到异步请求的结果)
    axios.request({
        /
/请求类型
        method: 'post',
        /
/URL
        url:'http:/
/localhost:3000/posts/2',
     //设置请求体(即传输的数据)
        data:{
       title: "candy",
         author: "i like"
        }
    }).then(response => {
        console.log(response)
    })
};

3、使用axios的实例对象(通过axios.create([config]) 进行创建):

//一般创建axios实例时,传入一些默认配置
const instance = axios.create({
baseURL'https://some-domain.com/api/',
    timeout1000,
    headers: {'X-Custom-Header''foobar'}
});
//instance 实例和 axios对象功能基本差不多
//使用axios的实例对象instance,方法的返回值是一个Promise对象(then方法可以拿到异步请求的结果)
instance({
    //请求类型
    method'GET',
    //URL
    url'/getJoke',
    //设置请求体(即传输的数据)
    params:{
       title"candy",
       author"i like"
    }
}).then(response => {
    console.log(response);
})



✿ 使用axios(config) 方法 和创建 axios实例对象的区别?

​ ■ axios.create(config) 对axios请求进行封装,创建axios实例对象的意义不同请求接口拥有不同配置,创建新的axios实例就可以有新的配置来应对接口配置需求。每个axios实例对象都有自己特有的配置, 分别应用到不同要求的接口请求中。

​ ■ axios实例对象和axios基本相同,只是实例对象少了有取消请求和批量发请求的方法。



二、axios的拦截器(对请求、响应做预处理)

1、请求拦截器:axios.interceptors.request.use(成功处理函数,失败处理函数)

■ 请求拦截:

1,可能是config中有一些信息是不符合服务器的要求 2,希望每次发送网络请求,在界面可以显示有一个请求的图标,就是那个转呀转的圆圈 3,一些网络请求必须要有特殊信息,例如登录(需要有token)


2、响应拦截器:axios.interceptors.response.use(成功处理函数,失败处理函数)

■ 响应拦截:

1,对响应的数据进行格式处理



三、axios的取消请求

■ 作用:取消掉某些用户,多次不断地点击请求按钮而发送请求给服务器造成压力

■ 取消方式:

(例如通过构造函数来创建取消令牌):在配置对象中添加 cancelToken属性,然后拿到执行函数中的参数c(取消函数)

let cancel = null;
//检测上一次请求是否完成(没完成,取消当前的请求)
if(cancle != null){
    cancle();
}
//axios发送请求
axios.get('/user/12345', {
    cancelTokennew axios.CancelToken(function executor(c){//参数c是取消函数         cancel = c;
    })
}).then(response => {
    console.log(response);
    cancel = null//请求执行完毕,恢复cancel的初始值

});

分类:

前端

标签:

前端

作者介绍

1一乐
V1