首页 > 其他分享> 文章详细

学习axios必知必会（2）~axios基本使用、使用axios前必知细节、axios和实例对象区别、拦截器、取消请求

2022-01-23 13:31:22 阅读：140 来源： 互联网

标签：拦截器请求实例必知对象 axios config response

一、axios的基本使用：

✿ 使用axios前必知细节：

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

■ 查看源码发现，起初axios是一个函数，但后续又给它添加上了一些属性【方法属性】

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

✿ axios 函数对象可以调用自身`axios(config)`发送请求也可以调用属性的方法`axios.request(config)`发送请求的原理：

<script>
//一开始a只是一个函数
    var a = function () {
        console.log('hi');
    }
    var fn = function () {
        console.log('hi');
    }
    //给a这个函数对象添加属性后，让它的属性指向某个函数，则a调用自身函数，或者调用属性fn的方法----效果是一样的
    a.fn = fn;
    console.log(a);
    console.dir(a);
    a();
    a.fn();
</script>

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/',
    timeout: 1000,
    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', {
    cancelToken: new axios.CancelToken(function executor(c){//参数c是取消函数        	cancel = c;
    })
}).then(response => {
    console.log(response);
    cancel = null; //请求执行完毕，恢复cancel的初始值

});

标签：拦截器,请求,实例,必知,对象,axios,config,response
来源： https://www.cnblogs.com/shan333/p/15836026.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9