Axios详细解析

Axios

Axios介绍

1、Axios是什么？

• Axios是一个基于promise的HTTP库，类似于jQuery的ajax，用于http请求。可以应用于浏览器端和node.js，既可以用于客户端，也可以用于node.js编写的服务端。

2、Axios特性

• （1）支持Promise API
• （2）拦截请求与响应，比如：在请求前添加授权和响应前做一些事情。
• （3）转换请求数据和响应数据，比如：进行请求加密或者响应数据加密。
• （4）取消请求
• （5）自动转换JSON数据
• （6）客户端支持防御XSRF

3、浏览器支持情况

• Firefox、Chrome、Safari、Opera、Edge、IE8+

Axios常用的请求方法

get, post, put, patch, delete

• get： 一般用户获取数据
• post： 一般用于表单提交与文件上传
• patch： 更新数据（只将修改的数据推送到后端）
• put： 更新数据（所有数据推送到服务端）
• delete：删除数据

备注：

​ post一般用于新建数据，put一般用于更新数据，patch一般用于数据量较大的时候的数据更新。

get方法

• 方式一
  如果不带有参数，代码如下：

      axios
        .get("/data.json")
        .then(res => {
       
          console.log(res);
        })
        .catch(err => {
       
          console.log(err);
        });
  

  如果带有参数，代码如下：

  	axios
        .get("/data.json", {
       
          params: {
       
            id: 12
          }
        })
        .then(res => {
       
          console.log(res);
        })
        .catch(err => {
       
          console.log(err);
        });
  

• 方式二
  如果不带参数，代码如下：

      axios({
   
          method:'get',
          url:'/data.json'
      }).then(res=>{
   
          console.log(res)
      })

​ 如果带有参数，代码如下：

 axios({
   
      method: "get",
      url: "/data.json",
      params:{
   
          id:12
      }
    }).then(res => {
   
      console.log(res);
    });

浏览器控制台相关信息介绍：

• Request URL：请求URL
• Request Method：请求方式

post方法

post 请求常用的数据请求格式有两种：

form-data（常用于表单提交（图片上传、文件上传））

 let data = {
   
      id: 12
    };
    let formData = new FormData();
    for(let key in data){
   
      formData.append(key,data[key])
    }
    console.log(formData)
    axios.post('/data.json',formData).then(res=>{
   
      console.log(res,'formData')
    })

application/json（常用）

• 方式一

  let data = {
   
      id: 12
    };
    axios.