Axios的基本介绍

一 Axios的概念

 

Axios是什么？

Axios是一个基于promise的HTTP库，主要用于浏览器和node.js。

 

Axios有哪些特性？

1. 支持Promise API
2. 拦截请求和响应请求
3. 转换请求数据和响应数据（请求是可以加密，在返回时也可进行解密）
4. 取消请求
5. 自动转换JSON数据（无需手动操作）
6. 客户端支持防御XSRF攻击

 

Axios常用的请求方法？

1. get：获取数据
2. post ：提交数据，表单提交或文件上传等。
3. put ：更新数据（所有数据推送到后端）
4. patch ：更新数据（只将修改的数据推送到后端）
5. delete：删除数据

 

Axios的安装与引用：

npm add axios // 安装axios
import axios from "axios"; // 引用axios

 

Axios的请求方法demo：

get：

// 写法一
axios.get("https://api.thecatapi.com/v1/images/search", {
    params: {
      limit: 1,
      page: 10,
      order: "Desc",
    },
  })
  .then((res) => {
    console.log(res);
}); 

// 写法二
axios({
      method: "get",
      url: `https://api.thecatapi.com/v1/images/search?limit=${1}&page=${10}&order=${"Desc"}`,
    }).then((res) => {
      console.log(res);
});

 

post：

post的两种请求格式：

form-data （常用于文件/图片上传）：content-type: multipart/form-data; boundary=----WebKitFormBoundaryK0A5EtRCDRaTJb7x boundary(后端解码内容)

application/json  常用格式，如data：content-type: application/json; charset=utf-8

// 请求方式一：application/json
// 写法一
let dataTest = {
  image_id: "asf2",
  sub_id: "my-user-1234",
  value: 1,
};
axios.post("https://api.thecatapi.com/v1/votes", dataTest).then((res) => {
  console.log(res);
}); 
// 请求方式二：form-data
// 写法二
let formData = new FormData();
formData.append("image_id", "asf2");
formData.append("sub_id", "my-user-1234");
formData.append("value", '1');
axios({
  method: "post",
  url: "https://api.thecatapi.com/v1/votes",
  data: formData,  // params 参数在请求体内
}).then((res) => {
  console.log(res);
});

 

delete：

let vote_id = '318737'
axios.delete(`https://api.thecatapi.com/v1/votes/${vote_id}`).then(res=>{
  console.log(res)
})

 

Axios并发方法：

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

// axios.all() 是一个数组，存放axios请求，数组顺序即请求数据
// axios.spead() 是多个请求(axios.all())完成后,对它的返回数据进行分割处理
axios.all([
   axios.get(`https://api.thecatapi.com/v1/images/search?limit=${1}&page=${10}&order=${"Desc"}`),
   axios.get('https://dog.ceo/api/breeds/image/random') 
]).then(
  // 并发的then不能只写一个回调请求
  axios.spread((catApi,dogApi)=>{
    console.log(catApi,dogApi)
  })
)

 

Axios 实例：

axios通过创建axios.create实例。

let instance = axios.create({   baseURL:'http://localhost:8080',   timeout:1000 }) instance.get('https://dog.ceo/api/breeds/image/random').then(res=>{   console.log(res) })

 

 Axios 实例相关配置：

• baseURL：请求的基础地址，请求接口时会拼接在baseURL后面
• timeout：请求的超时时长(毫秒)，如果请求的数据量比较大，会堵塞后端内容，然后超时释放超时内容。
• url：请求的路径
• method：请求的方法，get,post,pull,patch,delete
• headers：请求头，存放token。
• params：请求参数拼接在url上
• data：请求参数拼接在请求体内

let instance = axios.create({
  baseURL:'http://localhost:8080',
  timeout:1000,
  url:'',
  method:'get',
  headers:{
    token:''
  },
  params:{},
  data:{}
})

 

Axios配置的三种方式：

• 全局配置：axios.defaults
• 实例配置：axios.create，如果不添加参数则默认使用全局配置
• 请求配置：用于处理一些特殊接口，如数据量比较大，需要单独增加超时时长
• 配置优先级：全局配置 < 实例配置 < 请求配置

// 1.axios全局配置  axios.defaults
axios.defaults.baseURL = 'http://localhost:8080'
axios.defaults.timeout = 1000

// 2.axios实例配置，如果不添加参数则默认使用全局配置
let instance2 = axios.create({})

// 3.axio请求配置,用于处理一些特殊接口，如数据量比较大，要单独增加超时时长
instance.get('https://dog.ceo/api/breeds/image/random',{
  timeout:5000
}).then(res=>{
  console.log(res)
})

 

Axios请求多个域名接口：

 // Axios请求多个域名接口：
let instance = axios.create({
  baseURL:'http://localhost:8080',
  timeout:1000,
})
let instance2 = axios.create({
  baseURL:'http://localhost:8081',
  timeout:3000,
})
// 请求不同的域名接口
instance.get('/').then(()=>{console.log})
instance2.get('/',{timeout:5000}).then(()=>{console.log})

 

Axios拦截器：

• 拦截器：在请求或响应被处理前拦截它们
• 请求拦截器：在前端发起请求前处理
• 响应拦截器：在后端响应请求后处理
• 取消拦截器（不常用）

// 请求拦截器：在前端发起请求前处理
axios.interceptors.request.use(
  (config) => {
    // 发送请求前做些什么，如判断是否有token
    return config;
  },
  (Error) => {
    // 请求错误时返回
    return Promise.reject(Error);
  }
);

// 响应拦截器：在后端响应请求后处理
axios.interceptors.response.use(
  (res) => {
    // 请求成功后做些什么，如判断后端返回的code状态码
    return res;
  },
  (Error) => {
    // 响应错误做些什么
    return Promise.reject(Error);
  }
);
instance.get("/").then((res) => {
  console.log(res);
}); // then请求失败
instance2.get("/", { timeout: 5000 }).catch((Error) => {
  console.log(Error);
}); // catch请求失败

// 取消拦截器（不常用）
let interceptors = axios.interceptors.response.use((config) => {
  // 请求之前可以在headers中新增auth参数
  config.headers = {
    auth: true,
  };
  return config;
});
// 取消headers中的auth
axios.interceptors.request.eject(interceptors);

 

Axios拦截器demo：

请求与响应拦截器的处理

// 例一：登录（token）
let instance3 = axios.create({}); // 访问需要token的接口
instance3.interceptors.request.use((config) => {
  config.headers.token = "登录返回的token";
  return config;
});
let instance4 = axios.create({}); // 访问不需要token的接口

// 例二：请求中的loading提示
let instancePhone = axios.create({});
instancePhone.interceptors.request.use((config) => {
  // $('#loading').show 加载中打开
  return config;
});
instancePhone.interceptors.response.use((res) => {
  // $('#loading').hide 加载中关闭
  return res;
});

 

Axios取消请求

// Axios取消请求
// source()方法生成了一个取消请求的CancelToken、
let source = axios.CancelToken.source()
axios.get('/data.json',{
  cancelToken:source.token
}).then(res=>{
  console.log(res)
}).catch(err=>{
  console.log(err,)
})

// 取消请求，cancel中的参数会进入到catch中。cancel('参数可选')
source.cancel('cancel http')