2022-02-06 axios笔记(三) axios的特点和请求方式,常见api,axios的完整请求格式

0.axios 是前端最受欢迎的ajax请求库

特点

1.axios是基于promise的ajax异步请求库,即axios请求返回的是一个promise对象
2.axios既支持浏览器端使用(主要用途),也支持node端使用
3.axios支持请求拦截器和响应拦截器
4.可以取消请求
5.支持请求数据或者响应数据的格式自动转换:字符串<==>json对象
6.可以批量发送多个请求

请求语法

1.指定请求类型

//发送get请求
axios.get("http:localhost:3000/login").then(()=>{});
//发送post请求
axios.post("http:localhost:3000/login",{}).then(()=>{});

2.完整请求格式

axios({
	method:'请求方法',
	url:'请求路径',
	data:{post参数 },
	params:{get参数 }
}).then( res=>{ //请求成功的回调 })

1.常见api

发起请求:

axios(config)：最本质的能发任何类型请求的方式
axios.get(url, config)：发get请求
axios.put(url, config)：发put请求

配置:

axios.defaults.xxx：请求的默认全局配置，如baseURL

axios.defaults.baseURL='./api;//配置基础路径
axios.defaults.timeout=10000  //请求时间
axios.defaults.withCredentials=true ;//例如：登录校验session和cookie

拦截器:

axios.interceptors.request.use()：添加请求拦截器
axios.interceptors.response.use()：添加响应拦截器

创建axios实例:

axios.create(config)：新建一个 axios 实例(没有以下的功能)

取消请求:

axios.Cancel()：用于创建取消请求的错误对象
axios.CancelToken()：用于创建取消请求的token对象
axios.isCancel()：判断是否是一个取消请求的错误

批量执行多个异步错误:

axios.all(promises)：用于批量执行多个异步错误

接收所有成功回调

axios.spread(all):用于指定接收所有成功数据的回调函数的方法

2.使用axios的完整请求格式(函数形式)发起GET/POST/PUT/DELETE请求

代码接上例:2.使用axios的GET/POST/PUT/DELETE分别请求上述REST接口

// 配置基本路径后,axios参数中的URL可以省略该基本路径不用写
axios.defaults.baseURL = 'http://localhost:3000';
// 1.GET请求:获取posts接口中的数据
function testGet() {
    axios({
        method: "GET",
        //url: "http://localhost:3000/posts/1"
        url: "/posts/1"
    }).then(response => {
        console.log("get请求获取数据:", response.data);
    });
}
// 2.POST请求:向comments接口传参(添加数据)并返回接口中的数据
function testPost() {
   axios({
       method: "POST",
       url: "/posts/",
       data: {
           id: 3,
           body: "post body3",
           postId: 3
       }
   }).then(response => {
       console.log("post请求的获取数据:", response.data);
   });
}