Axios部分了解

axios常用请求方法

• 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);
      });
   //此时表示，参数为id=12，最终的请求路径Request URL: http://localhost:8080/data.json?id=12

//方式二
//不带参数
   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);
    });
此时表示，参数为id=12，最终的请求路径Request URL:http://localhost:8080/data.json?id=12

post方法

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

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

//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')
    }

axios.post('/user', {
    firstName: 'Fred',
    lastName: 'Flintstone'
  })
  .then(function (response) {
    console.log(response);
  })
  .catch(function (error) {
    console.log(error);
  });
  
//带参数
axios({
  method: 'post',
  url: '/user/12345',
  data: {
    firstName: 'Fred',
    lastName: 'Flintstone'
  }
});

put方法

let data = {
  id: 12
};
axios.put("/data.json", data).then(res=>{
  console.log(res, 'put')
});

patch方法

let data = {
  id: 12
};
axios.patch("/data.json", data).then(res=>{
  console.log(res, 'patch')
});

put和patch与post方法只有method不同，其他相同。

delete方法

//方式一：params
axios
  .delete("/data.json", {
    params: {
      id: 12
    }
  })
  .then(res => {
    console.log(res, "delete");
  });
  
let params = {
  id: 12
};
axios({
  method:'delete',
  url:'/data.json',
  params:params
}).then(res=>{
  console.log(res)
})

方式二：data
axiox .delete("/data.json", {
    data: {
      id: 12
    }
  })
  .then(res => {
    console.log(res, "delete");
  });
  
let data = {
  id: 12
};
axios({
  method:'delete',
  url:'/data.json',
  data:data
}).then(res=>{
  console.log(res)
})

并发请求

并发请求，就是同时进行多个请求，并统一处理返回值。

并发请求的应用场景：需要同时进行多个请求，并且需要同时处理接口调用的返回值的时候，我们可以使用并发请求。

function getUserAccount() {
  return axios.get('/user/12345');
}

function getUserPermissions() {
  return axios.get('/user/12345/permissions');
}

axios.all([getUserAccount(), getUserPermissions()])
  .then(axios.spread(function (acct, perms) {
    // Both requests are now complete
  }));

axios实例的创建

思路如下：创建多个实例，配置不同的超时时长，用不同的实例去请求不同的接口。使用axios.acreate来创建实例，配置相关信息，进行网络请求

// 实例1
let instance = axios.create({//axios实例配置
  baseURL:'http://loacalhost:8080',//请求的域名（基本地址)
  timeout:2000 //请求的超时时长，单位毫秒，默认。超出后后端返回401
})
instance.get('/data.json').then(res=>{//axios请求配置
  console.log(res)
})
//实例2
let instance2 = axios.create( {//axios实例配置
  baseURL: "http://loacalhost:8081",
  timeout: 2000
});
instance2.get("/city.json").then(res => {
  console.log(res);
});
此时我们就可以访问http://loacalhost:8080与http://loacalhost:8081两个不同域名的接口，并且使用不同的配置。

Response

axios.get('/user/12345')
  .then(function(response) {
    console.log(response.data);
    console.log(response.status);
    console.log(response.statusText);
    console.log(response.headers);
    console.log(response.config);
  });