Axios使用笔记

官网Axios中文文档 | Axios中文网 (axios-http.cn)

axios.js文件链接: https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js

使用axios：直接把js文件引入html

axios()函数调用后返回一个promise对象，这个promise对象可以使用then()/catch()方法

通用请求方法

以下两种都可

1.普通方法

axios({
  // ...请求选项
    url: 'http://...',
    method: 'POST', // 没有method项默认get
    data/params: {...}
}).then(result => {
  // 处理成功数据
}).catch(error => {
  // 处理失败错误
})

 2.在发出请求的async 函数内，使用await关键字取代then函数

// 1. 定义async修饰函数
async function getData() {
  try {
      const userData = await axios({'http://...'})
      ... // 请求成功后的操作
  } catch (error) {
      console.log(error)
  }
}
getData()

一、axios使用请求

1.get参数查询

• url (string): 请求的 URL 地址。
• params (object): 请求的查询参数对象。
• headers (object): 请求头对象。
• timeout (number): 请求超时时间。

params简写：当参数名和值同名时，可以只写一个： pname : pname -> pname

// 不带参数get
axios.get(url)
// 参数列表
axios.get('http://...', {
  params: {
    key1: value1,
    key2: value2
  },
  headers: {
    'Content-Type': 'application/json'
  },
  timeout: 5000
})

2.post提交数据

提交数据：（请求数据把data换成parems）

// data是携带的参数，config与get参数列表写法相同
axios.post(url, data, config)
// url拼接
const id = 123;
axios.post(`http://abcd/${id}`); // http://abcd/123

二、使用案例

/**
 * 目标：收集数据提交保存
 *  2.1 监听提交的点击事件
 *  2.2 依靠插件收集表单数据
 *  2.3 基于axios提交保存，显示结果
 */
// 2.1 监听提交的点击事件
document.querySelector('.submit').addEventListener('click', async () => {
  // 2.2 依靠插件收集表单数据
  const form = document.querySelector('.info-form')
  const data = serialize(form, { hash: true, empty: true })
  console.log(data)
  // 2.3 基于axios提交保存，显示结果
  try {
    const result = await axios({
      url: 'http://hmajax.itheima.net/api/feedback',
      method: 'POST',
      data
    })
    console.log(result)
    alert(result.data.message)
  } catch (error) {
    console.dir(error)
    alert(error.response.data.message)
  }
})

在请求头设置token

// http request拦截器 添加一个请求拦截器
    axios.interceptors.request.use(function (config) {
        if (localStorage.getItem("token")) {
            config.headers.token = localStorage.getItem("token");
            return config;
        }
    }, function (error) {
        console.log(error);
        return Promise.reject(error);
    });

三、创建Axios实例

1.配置axios实例

const myAxios = axios.create({
  // `url` 是用于请求的服务器 URL
  url: '/user',

  // `method` 是创建请求时使用的方法
  method: 'get', // 默认值

  // 它可以通过设置一个 `baseURL` 便于为 axios 实例的方法传递相对 URL
  baseURL: 'https://some-domain.com/api/',

  // 自定义请求头
  headers: {'X-Requested-With': 'XMLHttpRequest'},

  // `timeout` 指定请求超时的毫秒数。
  // 如果请求时间超过 `timeout` 的值，则请求会被中断
  timeout: 1000, // 默认值是 `0` (永不超时)
}
});

2.拦截器

在请求或响应被 then 或 catch 处理前拦截它们。

// 添加请求拦截器
axios.interceptors.request.use(function (config) {
    // 在发送请求之前做些什么
    return config;
  }, function (error) {
    // 对请求错误做些什么
    return Promise.reject(error);
  });

// 添加响应拦截器
axios.interceptors.response.use(function (response) {
    // 2xx 范围内的状态码都会触发该函数。
    // 对响应数据做点什么
    return response;
  }, function (error) {
    // 超出 2xx 范围的状态码都会触发该函数。
    // 对响应错误做点什么
    return Promise.reject(error);
  });

给自定义的 axios 实例添加拦截器。

const MyAxios = axios.create(...);
MyAxios.interceptors.request.use(function () {...});

移除拦截器：

const myInterceptor = axios.interceptors.request.use(function () {...});
axios.interceptors.request.eject(myInterceptor);

3.错误处理

axios.get('/user/12345')
  .catch(function (error) {
    if (error.response) {
      // 请求成功发出且服务器也响应了状态码，但状态代码超出了 2xx 的范围
      console.log(error.response.data);
      console.log(error.response.status);
      console.log(error.response.headers);
    } else if (error.request) {
      // 请求已经成功发起，但没有收到响应
      // `error.request` 在浏览器中是 XMLHttpRequest 的实例，
      // 而在node.js中是 http.ClientRequest 的实例
      console.log(error.request);
    } else {
      // 发送请求时出了点问题
      console.log('Error', error.message);
    }
    console.log(error.config);
  });

使用 validateStatus 配置选项，可以自定义抛出错误的 HTTP code。

axios.get('/user/12345', {
  validateStatus: function (status) {
    return status < 500; // 处理状态码小于500的情况
  }
})

使用 toJSON 可以获取更多关于HTTP错误的信息。

axios.get('/user/12345')
  .catch(function (error) {
    console.log(error.toJSON());
  });

 插件form-serialize收集form

使用语法：

1.引入 form-serialize 插件到自己网页中

2.使用 serialize 函数

• 参数1：要获取的 form 表单标签对象（要求表单元素需要有 name 属性-用来作为收集的数据中属性名）

• 参数2：配置对象

  • hash：true - 收集出来的是一个 JS 对象结构；false - 收集出来的是一个查询字符串格式

  • empty：true - 收集空值；false - 不收集空值

 <body>
   <form action="javascript:;" class="example-form">
     <input type="text" name="username">
     <br>
     <input type="text" name="password">
     <br>
     <input type="button" class="btn" value="提交">
   </form>
     
 1.引入 form-serialize 插件
   <script src="./lib/form-serialize.js"></script>
   <script>
     document.querySelector('.btn').addEventListener('click', () => {
     const form = document.querySelector('.example-form')
 2.使用serialize函数，快速收集表单元素的值
     const data = serialize(form, { hash: true, empty: true })
     console.log(data)
     })
   </script>
 </body>